Updated Preview: Multiple Backgrounds with CSS3

201109 May
Updated Preview: Multiple Backgrounds with CSS3
by Chris
Posted in CSS3 Previews
Tweet

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.

Read the updated article in our CSS3 Preview section »

You can skip to the end and leave a response.
Comments
- 01.
  
  Matt says:Comment » May 9th, 2011 at 10:14 am
  
  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.
  
  Jeffrey Gilbert says:Comment » May 9th, 2011 at 10:09 pm
  
  matt, links or it didn’t happen. i wanna see what you’re claiming can’t be done.
- 03.
  
  Adrian von Gegerfelt says:Comment » May 12th, 2011 at 2:41 pm
  
  Matt, you don’t need “sliding doors” now when you can use border images in CSS3
- 04.
  
  Rob says:Comment » May 13th, 2011 at 5:47 am
  
  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.
  
  Thomas says:Comment » May 13th, 2011 at 4:26 pm
  
  use border-radius
- 07.
  
  Apollyon says:Comment » May 13th, 2011 at 4:56 pm
  
  Is it possible to make it work in old browsers?
- 08.
  
  Chris Marsh says:Comment » May 17th, 2011 at 4:51 pm
  
  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.
  
  Saeed Neamati says:Comment » May 24th, 2011 at 9:02 am
  
  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.
  
  Johnathan says:Comment » July 9th, 2011 at 10:31 pm
  
  This is really useful stuff. And its supported in a lot of browsers so good news there!
- 11.
  
  Anirudh says:Comment » July 23rd, 2011 at 3:50 am
  
  nice…will it work in blogger
- 12.
  
  Timothy Zhu says:Comment » August 30th, 2011 at 10:34 pm
  
  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. :(

Subscribe to our RSS

CATEGORIES

FRIENDS

Meta

Hosting by:

CSS3

Comments

Leave a Comment