CSS3 Multiple background images
Multiple background images is a CSS3 feature that makes it possible to create complex, scalable and beautiful webpages with light-weight, semantic HTML markup.
Multiple background images can make CSS and HTML simpler:
- It removes the need for elements just for styling. For example CSS sliding doors can be done with a single HTML element.
- It makes it easy to create stretchy page elements that can be easily resized or dropped into different sized places in a website.
- It empowers designers to be more daring because it’s easier to create CSS for complex designs
This has good browser support. All the recent versions of Webkit, Firefox and Opera support it. It also works in IE9 or newer.
Using multiple background images
CSS3 supports more than one background image listed in the background CSS property. The syntax is otherwise is exactly the same as declaring a single background:
-
background: url("multiple-background-bottom.png") repeat-x bottom,
-
url("multiple-background-image.png") no-repeat bottom right,
-
url("multiple-background-bg.png");
The browser applies the images top to bottom, so the first one you declare will overlap any of the others. All the CSS background attributes are supported.
You could also list out each of the background attributes separately:
-
background-image: url("multiple-background-bottom.png"),
-
url("multiple-background-image.png"),
-
url("multiple-background-bg.png");
-
background-repeat: repeat-x, no-repeat, repeat;
-
background-position: bottom, bottom right, top right;
Backwards compatibility
Multiple background images degrade quite nicely in older browsers. You can supply a single background image before you declare the multiple background images and the browsers with support will show the multiple background images while the other browsers will just show the single one:
-
/* you can put in a single background for browsers that don't support it */
-
background: url("multiple-background-bg.png");
-
-
/* example using background short hand property */
-
background: url("multiple-background-bottom.png") repeat-x bottom,
-
url("multiple-background-image.png") no-repeat bottom right,
-
url("multiple-background-bg.png");
Comments
Hi Helen, very nice post. I’ve applied multiple backgrounds to a new site and added a single background for browsers who don’t support it yet.
I’ve also applied a background-color to the divs with multiple backgrounds. It seems that you can’t use this in a one-line statement, such as:
background: #fff url(/image1.png), url(/image2.png);
Is this correct? To make it work, I have to add the background-color after I set the background-images.
All works fine in FF and IE7, but in IE8 only the background-color is shown. Might there be a solution to this?
Best wishes,
Wil
You have to put the background colour on the last background declaration:
background: url(“multiple-background-bottom.png”) repeat-x bottom,
url(“multiple-background-image.png”) no-repeat bottom right,
pink url(“multiple-background-bg.png”) no-repeat;
The browser works from last to first when painting the div so the last one is at the back and the first one is at the front. That’s why the last one is the only one it makes sense to have a background colour on. If the browser painted a background colour when processing one of the other background declarations it would overwrite all the backgrounds that were underneath it.
I’m not sure what you mean by IE8. What’s not working?
Somehow in IE8 I only see the background-color and none of the background-images. It does seem to load correctly, but it is immediately replaced with the background-color. Even if I add a IE-only conditional statement.
Have a look at http://connecteu.hieruwwebsite.nl/ if you want, that’s what I’ve been working on.
Thanks!
Great post! I’ve longed for wider support for multiple background images since WebKit first began supporting them a while back. The best bit is that the newly introduced CSS gradients also follow this rule when used with the background-image property. So we get multiple gradients as a bonus!
Thanks for the clear and short post, Helen!
body
{ background: url(…michael100x200.png)no-repeat top right fixed,
url(…mich120.png)no-repeat top left fixed,
url(…BGskyG.jpg);
}
I put this code in a custom CSS file to my blog in Opera 10.60, it works.
Here’s how to set the offset images?
I tried to replace the “top” to “10%” or “50px”, but it does not work.
You have to put the background colour on the last background declaration: background: url(“multiple-background-bottom.png”) repeat-x bottom, url(“multiple-background-image.png”) no-repeat bottom right, pink url(“multiple-background-bg.png”) no-repeat; The browser works from last to first when painting the div so the last one is at the back and the first one is at the front. That’s why the last one is the only one it makes sense to have a background colour on. If the browser painted a background colour when processing one of the other background declarations it would overwrite all the backgrounds that were underneath it. I’m not sure what you mean by IE8. What’s not working?
tried this for ful background with middle overlay look… works in chrome, firefox, safari bit not IE… any know an IE fix/technique?
background-image: url(‘images/skin.png’), url(images/skin2.png);
background-position: center top;
background-color: transparent;
background-attachment: fixed;
background-repeat: no-repeat, repeat;
Being able to use multiple background images sure helps with graphic intensive websites. Thanks for the great post.