2 background images

[7thdesire]

can anyone tell me why this css code wont work please

body
{
margin:0px auto;
padding:0px;
background-image:url(images/body-top-bg.jpg), url(images/footer-bottom-bg.jpg);
background-repeat:repeat-x, repeat-x;
background-position:center top, left bottom;
max-width: 1024px;
}

both background work the way i want on there own but there must be away of displaying 2 together 1 header, 1 footer

any help would be great

[Paul O'B]

Hi,

It doesn't work because you can't apply 2 images to an element.

You can only place one background image per element (ignoring :before :after and content:"").

You will need to use 2 containers and apply an image to each. You can use the body for one image and then use a main container for the other image.

[Paul O'B]

Maybe you can use the html + body

Yes that's fine but as long as you are not worried about ie5.+ (and ie6 in quirks mode) that don't recognise the html element.

Otherwise its a good method and saves on mark-up