321

Is it possible to have two background images? For instance, I'd like to have one image repeat across the top (repeat-x), and another repeat across the entire page (repeat), where the one across the entire page is behind the one which repeats across the top.

I've found that I can achieve the desired effect for two background images by setting the background of html and body:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

Is this "good" CSS? Is there a better method? And what if I wanted three or more background images?

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Rudd Zwolinski
  • 26,712
  • 17
  • 57
  • 60

8 Answers8

381

CSS3 allows this sort of thing and it looks like this:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
nickf
  • 537,072
  • 198
  • 649
  • 721
  • 27
    Multiple backgrounds are supported by the latest versions of Firefox, Chrome, Safari and Opera. It will be supported in IE9, too. http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets) – Šime Vidas Oct 30 '10 at 23:44
  • 4
    And if you wish to have different repeat/position settings you can do this: http://www.css3.info/preview/multiple-backgrounds/ – Krisc Mar 05 '11 at 19:56
  • 2
    For IE8 - IE6, you can use PIE.js. http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/curing-css3-headaches-in-older-browsers/ – Aleš Kotnik Mar 28 '13 at 13:15
  • 1
    Does background-size follow this same rule? I want all of my backgrounds images to be full height, except for one of them (which I want to be the image height). – mtmurdock Jun 05 '14 at 18:23
  • Yes, background-size follows the same rule (like all of the other background properties). The background properties (usually starting with the prefix background- and then a specific property of the background) can actually be specified within the background property itself, so since multiple background images are supported, multiple listed properties are also supported. This applies to size, position, repeat, etc. – Cannicide Nov 30 '19 at 21:14
36

The easiest way I have found to use two different background images in one div is with this line of code:

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

Obviously, that does not have to be for only the body of the website, you can use that for any div you want.

Hope that helps! There is a post on my blog that talks about this a little more in depth if anyone needs further instructions or help - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div.

TheLibzter
  • 768
  • 8
  • 8
28

use this 

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

a simple way to adjust you every image position with background-position: and set repeat property with background-repeat: for every image individually

L84
  • 45,514
  • 58
  • 177
  • 257
code.rider
  • 1,891
  • 18
  • 21
13

Current version of FF and IE and some other browsers support multiple background images in a single CSS2 declaration. Look here http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ and here http://www.quirksmode.org/css/multiple_backgrounds.html and here http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

For IE, you might consider adding a behavior. Look here: http://css3pie.com/

Shannon
  • 241
  • 4
  • 9
4

Yes, it is possible, and has been implemented by popular usability testing website Silverback. If you look through the source code you can see that the background is made up of several images, placed on top of each other.

Here is the article demonstrating how to do the effect can be found on Vitamin. A similar concept for wrapping these 'onion skin' layers can be found on A List Apart.

Mike B
  • 12,768
  • 20
  • 83
  • 109
4

If you want multiple background images but don't want them to overlap, you can use this CSS:

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

with this HTML structure:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>
Pops
  • 30,199
  • 37
  • 136
  • 151
rachel
  • 41
  • 1
2

#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

We can easily add multiple images using CSS3. we can read in detail here http://www.w3schools.com/css/css3_backgrounds.asp

Rinku
  • 1,175
  • 1
  • 12
  • 13
1

You could have a div for the top with one background and another for the main page, and seperate the page content between them or put the content in a floating div on another z-level. The way you are doing it may work but I doubt it will work across every browser you encounter.

Sean James
  • 11,951
  • 1
  • 15
  • 8