[SOLVED] Full-screen footer and full screen header
Hi,
I want a full screen background fixed on the top of the site and for that I added in ATO-Body, Text & links, Body Style this: background: url("/images/1.png") repeat-x fixed left top transparent; and I want a full screen background for the footer as well and I added in ATO-Add html/css inserts, in CSS inserts this: body{ background: url(/images/footer.png) repeat-x left bottom transparent; } When I added the second one I lose the fixed background and the top of the site is not a full screen anymore. I am making sense? I would like to be able to have a header full screen fixed and a footer full screen. Any help would be greatly appreciated. link: http://carme.karmeba.com/ Carme |
I am guessing you mean full width not full screen. There is a thread in the FAQs that deals with this.
|
Thanks for the answer, I have done that already and it doesn't work for me :confused:
I added that in Body Text: background: url("/images/1.png") repeat-x fixed left top transparent; and that in Insert CSS: body{ background: url(/images/footer.png) repeat-x left bottom transparent; } and when I added the second background the first one disappears. I try with the code from the Thread you pointed me, but it makes things worse, the first background disappears and made the footter fixed and I don't want that. I can't see where I make the mistake. Any suggestion! Thanks in advance Carme |
|
Hi,
1.- the background I added in Body Text is 1260width x 863 height ( I wanted to cover the whole page). and the one from the footer is 1300width x 135 height 2.- The "images" folder is the one I created just near wp-admin, wp-content, etc.. I am always creating my own images folder in this way. Carme |
You can't have two background images if one of them is sized to cover the full area. You use one for the top, one for the bottom and one background color. Here is a site i did that used that technique.
|
Yes, it makes sense.
But still it doesn't work for me, I changed the header background for a 1260width x 135 height and it doesn't work :confused: I wonder if it's because i am using a fixed one on the top? |
This is where you will need to play with Firebug and try various things.
|
Quote:
For instance on my website I use this CSS in Body, text and links Code:
background: url("/images/personal-website-design-brighton-sussex.png") top left no-repeat,
The only flaw with this is that it doesn't work in IE (as always), because IE only allows one image per CSS selector, so it would only show the top one (in my case the logo and my website would have a white background).. to get around that I have put the following in my HTML Inserts: Header HTML Code:
<!--[if lt IE 10]> <link rel="stylesheet" type="text/css" href="/ie8.css" /> <![endif]--> in the separate stylesheet I have used the following CSS: Code:
body { Rather than using a separate style sheet, you could also put this in your HTML Inserts: Header Code:
<!--[if lt IE 10]> |
Thanks for your input. It worked great, and solved my problem. Liked your website too.
|
All times are GMT -6. The time now is 05:50 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.