Comments on: CSS3 Multiple background images http://helephant.com/2009/11/css3-multiple-background-images/ Mon, 01 Feb 2010 01:30:39 -0500 http://wordpress.org/?v=abc hourly 1 By: Alex G http://helephant.com/2009/11/css3-multiple-background-images/#comment-4598 Alex G Sun, 31 Jan 2010 11:13:48 +0000 http://helephant.com/?p=1694#comment-4598 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! 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!

]]> By: Wil http://helephant.com/2009/11/css3-multiple-background-images/#comment-3230 Wil Sat, 05 Dec 2009 20:04:11 +0000 http://helephant.com/?p=1694#comment-3230 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! 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!

]]> By: helen http://helephant.com/2009/11/css3-multiple-background-images/#comment-3224 helen Sat, 05 Dec 2009 17:14:06 +0000 http://helephant.com/?p=1694#comment-3224 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? 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?

]]> By: Wil http://helephant.com/2009/11/css3-multiple-background-images/#comment-3205 Wil Fri, 04 Dec 2009 17:14:39 +0000 http://helephant.com/?p=1694#comment-3205 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 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

]]>