rob cherny.com

About

My name is Rob Cherny and I'm a professional Web Developer with 16 years of experience creating Web sites and Web-based applications. This site is where I write about my work, and random other things...

Learn More

Loading...

Close Tab

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.

  1. <body>
  2.         <div id="bg"></div>
  3.         <div id="content">
  4.                 <h1>Dual Background Colors</h1>
  5.         </div>
  6. </body>

The CSS

To get the effect with CSS, you start by applying a normal background image to the BODY element:

  1. body {
  2.         background: #fff url(bg-one.gif) repeat-x;
  3. }

Then, using the extra #bg element, you have to do a few things:

  1. apply a background repeating one direction,
  2. set a width that is only 50% of the canvas,
  3. make the DIV the height of the image being used for the background,
  4. and finally, make it absolutely positioned so that it is out of the document flow.

This will look something like this:

  1. #bg {
  2.    width: 50%;
  3.    height: 351px; /* height of bg! */
  4.    position: absolute;
  5.    top: 0;
  6.    left: 0;
  7.    background: transparent url(bg-two.gif) repeat-x;
  8. }

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.

  1. #content {
  2.         position: relative;
  3.         z-index: 1;
  4. }

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, 12:10 AM in Web Development (filed under CSS, XHTML)

  1. oliver wieland    Mar 23, 04: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.

  2. rob    Mar 25, 03:42 PM    #

    Oliver, I wouldn’t mind helping but I can’t get that address to come up …

  3. skobaljic    Jul 20, 05: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

  4. Mark    Oct 28, 05: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>

  5. 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

commenting closed for this article

In This Section