Loading...Web Development
Dual CSS Background Images
Last year I worked on a small Web site for Sunrise Senior Living, for a retirement community called Foxhill. The design called for two different background images going out to the left and the right of a centered design.
Now the CSS3 specification calls for multiple background images on the box model, and Safari has actually already implemented this feature. However, sadly, due to Safari's market share, that's pretty much useless to us so we need a new way to get multiple CSS backgrounds.
One option was of course to use a GIANT background image, but I hated doing that in 1997, and I still hate doing that.
So I had to come up with a way to do this. There were a number of options available being that you're able to layer boxes in CSS these days, and I was hoping to discover a way to do it without unnecessary added markup. In the end, I did something that worked, but I've never been totally pleased with. But the fact that it worked seemed worth mentioning, even though there's nothing too remarkable about it offhand.
The (X)HTML
What I ultimately settled on was having an empty DIV (#bg, see below) which was for no other purpose than to place a second background image on top of the BODY background image.
The CSS
To get the effect with CSS, you start by applying a normal background image to the BODY element:
Then, using the extra #bg element, you have to do a few things:
- apply a background repeating one direction,
- set a width that is only 50% of the canvas,
- make the DIV the height of the image being used for the background,
- and finally, make it absolutely positioned so that it is out of the document flow.
This will look something like this:
The final step is to prepare the content area. In every browser except for Opera, it will work out of the shoot if you set it as positioned relative, and that's all you need. However, and this actually makes a little sense to me, you need to set a z-index so that the content area is on top of the DIV which has the other background image.
The Final Example
The final working example shows all the code put together for you. That's pretty much it. Enjoy.
Some final notes are worth mentioning, like obviously this could be applied to much more complex layers of background images. Also, there are probable other ways of doing this, perhaps something with a negative margin, or possibly even something using the HTML element, which some browers let you style these days. But there you have it, a body with two backgrounds.
Apr 19, 01:10 AM in Web Development (filed under CSS, XHTML)
Possibly Related Articles
Commenting is closed for this article.
oliver wieland Mar 23, 05:43 PM #
Hey man, doubt you’ll have time for me but I’m desperate now. I can’t get my background image to show up. thought i’d coded it by the book. http://oliver.wieland.online.co.uk/bgtest using css with divs, ultimatly i want to have a tiled bg image with a centred soliid black column that stretches from top to bottom with a fixed width. there you have it.
rob Mar 25, 04:42 PM #
Oliver, I wouldn’t mind helping but I can’t get that address to come up …
skobaljic Jul 20, 06:13 AM #
maybe this way for 2 layered background images? it works fine here.
body {
margin: 0;
background-color: #e21735;
background-image: url(myVerticalBar.jpg);
background-repeat: repeat-x;
}
#newbody {
margin: 0;
width: 100%;
position: absolute;
background-image: url(secondImage.jpg);
background-position: top center;
background-repeat: no-repeat;
height: 1200px;
}
#content {
position: relative;
width: 800px;
margin: 0 auto;
}
than put div content inside newbody – that’s all
Mark Oct 28, 06:09 PM #
Hey guys I don’t know if this is a practical solution to your needs but I spent all last night trying to get some magic css code to set up both bg img on the same layer. What I did is very basic: two seperate div layers with 100% width so the image will adjust with the window’s size. Unfortunately you cannot use repeating backgrounds. I use it for myspace so i have both images spliced at 400px width a piece and on a 800 × 600 window on older systems it will look somewhat neat. here’s my code:
< div id=bglayer1 style=“position:absolute; top:140; left:1%; width:100%; height:100%; z-index:1; padding:5px; border: #000000
0px solid;layer-background-image:url(YOUR.GIF); background-position:
bottom left; background-repeat: no-repeat”>
< /div>
< div id=bglayer2 style=“position:absolute; top:140; left:1%; width:100%; height:100%; z-index:1; padding:5px; border: #000000
0px solid; layer-background-image:url(YOUR.GIF);
background-position: bottom right; background-repeat: no-repeat”>
< /div>
Brad Dec 2, 05:26 AM #
Why dont you just set one image in body, and then create a “wrapper” with 100% width/height as a secondary “body” then position your images accordingly. Works for all image layouts ie left/right, header footer etc with no z-index stuff which unbelievably i have found instances it breaks the layout in some browsers.
Sometimes the most effective solution is the simplest one.
eg
body { background-image: url(Images/BgGradAlt.png); background-repeat: repeat-x; margin: 0px; padding: 0px;
}
#wrapper{
margin:0px;
padding:0px;
width:100%;
height:100%;
min-width:700px;
min-height:1000px;
background-image:url(Images/BgGradAltBottom.png);
background-position:bottom;
background-repeat:repeat-x;
}
html is simple
body
div id wrapper
....your stuff here
/div
/body