-
201109 May
Posted in CSS3 Previews
CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.
Browser support for multiple backgrounds is now relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.
You can skip to the end and leave a response.
-
Comments
-
01.
The only problem is that the sliding doors technique won’t work with transparent pngs on the edges. The center background will show through. But border-image is probably more appropriate for that anyway.
-
02.
matt, links or it didn’t happen. i wanna see what you’re claiming can’t be done.
-
03.
Matt, you don’t need “sliding doors” now when you can use border images in CSS3
-
04.
Jeff: I think matt explained it quite well in words. Think of the sliding door example. You have 3 background images: left cap, center fill, right cap. Without using border-image or border-radius, the center fill would fill the whole div, including the areas of the right and left caps that would be rounded, showing the center fill texture instead of a transparency showing thru to the background.
-
05.
NES says:Comment » May 13th, 2011 at 7:01 am
Multiple background image will never reach full potential without -moz-image-rect
-
06.
-
07.
-
08.
Multiple backgrounds are a great new tool for web designers, especially when joined up with CSS3 gradients – you can have a tiled repeating background _and_ a subtle gradient on a background all at the same time!
-
09.
Yeah, CSS3 rocks. We all remember days when we had to write more HTML just for providing some placeholders for additional background images. I love evolution.
-
10.
This is really useful stuff. And its supported in a lot of browsers so good news there!
-
11.
-
12.
This saves so much time. But unfortunately most clients still need support for IE8/IE7, so usually I can’t do it the easy way. :(
-
01.
