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


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

• What is the physical size of the background images
• What "images" folder did you put them in

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

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.

Originally Posted by lmilesw

You can't have two background images if one of them is sized to cover the full area.

Hi Larry, I believe you can have more than two background images, as long as you layer them correctly. If one of them is to cover the whole area, you need to make sure you put it at the bottom.

For instance on my website I use this CSS in Body, text and links

background: url("/images/personal-website-design-brighton-sussex.png") top left no-repeat,
 url("/images/personal-website-design-brighton-sussex-header.png") top left repeat-x,
 url("/images/personal-website-design-brighton-sussex-footer.png") bottom left repeat-x, 
url("/images/noise.png") repeat;

1. 1st image is my logo on a transparent background, to ensure this always stays in the top left corner
2. 2nd image is my header image which is repeated at the top to the left to accommodate all screen sizes (although not perfect on very large screens, I am happy with it)
3. 3rd image is my footer which is repeated at the bottom and to the left to do the same as the header
4. 4th lastly is my background noise image to slot in below all the other images

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

<!--[if lt IE 10]> <link rel="stylesheet" type="text/css" href="/ie8.css" /> <![endif]-->

(For those who don't know: this means for IE lower than IE 10, please use this style instead.)
in the separate stylesheet I have used the following CSS:

body {
    background: url("/images/personal-website-design-brighton-sussex-header-logo.png") repeat-x scroll left top !important;
}

html{
	background: #ccc url('/images/personal-website-design-brighton-sussex-footer.png') repeat-x scroll left bottom !important;
	z-index: 2 !important;
}

This is a different header image that includes my logo in the left in the body and a grey background and footer image in the html. I used z-index 2, because otherwise it wouldn't show

Rather than using a separate style sheet, you could also put this in your HTML Inserts: Header

<!--[if lt IE 10]> 
<style type="text/css">
<!--
body {
    background: url("/images/personal-website-design-brighton-sussex-header-logo.png") repeat-x scroll left top !important;
}

html{
	background: #ccc url('/images/personal-website-design-brighton-sussex-footer.png') repeat-x scroll left bottom !important;
	z-index: 2 !important;
}

</style>
 <![endif]-->

I hope that makes sense and would help someone else trying to do the same!

Thanks for your input. It worked great, and solved my problem. Liked your website too.