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.
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.
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.
Possibly Related Articles
Commenting is closed for this article.