PDA

Click to See Complete Forum and Search --> : [RESOLVED] 2 background images

webevelopersFTW
12-05-2009, 11:13 AM
is there anyways you could tell me how i can add two images to the back ground this works in chrome but not in the other browers


body {
background:url(images/bluehead1.png) repeat-x top left, url(images/grid.png);
}


i just want the "bluehead1.png" to go across the screen once

then i want "grid.png" to be the rest of the page.
mitya
12-05-2009, 11:20 AM
No, this is not standard.

The workaround is to apply one BG to the body and another to a DIV that has 100% width and height, so it acts like a second body.
webevelopersFTW
12-05-2009, 11:29 AM
so i could leave bluehead1.png in the body but then in each div after that i add the other image?

so here is my first one and i added

.container {
background:url(images/grid.png);
overflow: hidden;
width: 900px;
margin: 0 auto;
}

but this is not working
mitya
12-05-2009, 11:36 AM
What's not working?

You want 2 background images on your body, so this is what I mean:

CSS
body { background:url(images/bluehead1.png) repeat-x top left, url(images/grid.png); }
#body2 { width: 100%; height: 1000px; background:url(images/grid.png) repeat-x top left, url(images/grid.png); }

HTML
<body>
<div id="body2">
<!-- content etc -->
</div>
</body>
webevelopersFTW
12-05-2009, 11:47 AM
thank you for your help

for anyone that cares

body {
background:url(images/bluehead1.png) repeat-x top left;
}
#body2 {
width: 100%;
height: 1000px;
background:url(images/grid.png);
}



html


<body>
<div id="body2">
<!-- content etc -->
</div>
</body>
ArtphotoasiA
12-08-2009, 12:18 PM
Yes this is the correct way to solve the issue !