Adding more than one Background Image with CSS

At times, it makes more sense to use background images than to insert them directly into the page. And while each element – like your body tag – can hold only one background image, they can be applied to several elements.

But pretty much every selector can hold a background image. On THIS PAGE, I have added the image to the html tag, the body tag, and the h1 and h2 tags (these are ‘selectors’) – like so:

body {
	background: url(bgimage.jpg) repeat-y right;
}
 
html {
	background: url(bgimage.jpg) repeat-y left;
}
 
h1 {
	background: url(bgimage.jpg) no-repeat right;
}
 
h2 {
	background: url(bgimage.jpg) no-repeat left #ffc;
	padding-left: 250px;
	height: 150px;
}
 
#wrapper {
	padding: 0 250px; 
/*I'm using the right and left padding of the wrapper to keep
the content off the images */
}

Note that I’m a bit lazy at the moment, and am using the same image for all four selectors. Taking a closer look at each of them, also shows a bit more how things work:

The html tag (image displayed on the left) repeats the flower all the way down the monitor, regardless of how much content there is. Resize your window and see what happens.

The body tag, where the image is displayed to the right, only shows the image as far as the content goes.

The h1 tag only shows as much of the image as the space its content is taking up.

The h2 tag also has some height added to it (exactly 150px, the height of the background image), so it does show the entire image. I’ve also added the background color to more clearly demonstrate the space that’s taken up by h2.

Tags:

This post was written by:

This entry was posted on Saturday, May 8th, 2010 at 11:48 am and is filed under CSS Basics, CSS Misc, CSS Page Layouts, Killer CSS Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

12 Responses to “Adding more than one Background Image with CSS”

  1. James Winthrop says:

    This is not a good solution. Have you checked it in multiple browsers, including IE 7? There is a large gap on the right hand side where the image is supposed to be…

  2. Andrea says:

    The page looks fine in IE7 (same as in FX and IE8) – what specifically are you talking about? Note that the background image applied to the body tag only shows to the extend of content, not the entire monitor area as does the one applied to the html tag.

  3. Julie says:

    Thank you so much for this sample. I have been trying to put two images on both sides for about two weeks. Two questions, please – 1. I understand the right image only follows the content, but is there a way to get it completely to the top? 2. I would like a background color and cannot seem to change it. Help!!

  4. Andrea Barnett says:

    To Julie:

    The reason you see a space at above the background image on the right is the browser’s default margin/padding settings. Normally, I start my CSS with
    * {margin: 0; padding: 0;}
    which would take care of this spacing.

    As to a background color (#808080 – or whatever), just add it to this line:

    body {
    background: url(bgimage.jpg) repeat-y right;
    } — like so:

    body {
    background: url(bgimage.jpg) repeat-y right #808080;
    }

    or whichever tag, depending on where exactly you want the color.

    Does that help?

  5. Julie says:

    Thanks for responding so fast.The background color worked like a charm. That margin tag moved the right image to the top. So thanks for helping with my questions.Now I have another problem. The background now covers the left image. I have tried adjusting all the margins and padding, but am unable to figure out my problem. heres the page I am working on: http://www.homebusinessmoms.com/trything.shtml

  6. Julie says:

    Oh, Yeah!! after a lot of experimenting, I think I’ve got it.
    I was trying to add a colored background to the middle of the page between the two images.
    Instead of adding the bgcolor to the body tag, I added it to the html tag. This gave me a background color without covering up the left side image.

    Thanks so very much for all of your help. Love your site.
    Your tutorials are so easy to understand.

  7. Davy says:

    I am trying to understand this because in a header I need to put one .gif as a gradient background repeat-x and over it I need to put a logo .gif I cannot figure it out. If you can explain how to do it I will be so thankful. Here is the .css code that has the gradient background in place and I need to know how to put the logo over it.

    /* header area */

    #header {

    background: #c66310 url(images/head-bg.gif) repeat-x;

    height: 127px;

    border-top: 10px solid #fff8d9;

    position: relative;

    color: #08DA07;

  8. Subhendu says:

    How could i change the background color of a website, according to change the “percentage of width” of that website?

  9. I do not know what you mean by ‘according to change the “percentage of width” of that website?’ but in general, if you’re just applying a color to the background instead of a background image, you’d just specify the color – for example:

    body {background: #ffffff;}

  10. Davy, I use apDIv for everything on a web sity. Just do your header with the background color you want. Then do apDiv, size it just a little more then the Logo and put that Logo in side the Div. Make sure your use absolute for position and your can more that Logo anywhere you want, Make to check it that it does not overlay any other element.

  11. saquib says:

    i used the image from my hard disk, path of that image was C:\Users\saquib\Pictures. it did not work, why? please let me know.
    thanking you

  12. banzai says:

    you have to upload the image to the web site and then point
    the image to the location on web site. Web sites can’t access your hard disk. Some authoring tools will do this for you automagically, but usually you have to do some part of it yourself.

    copy C:\Users\saquib\Pictures\mypic.jpg to http://www.mysite.com/images/mypic.jpg (use ftp to do this) and your html pointer will be /images/mypic.jpg