Multiple background images

Following the revelation of Safari's support for multiple background images I created a very simple page that tests this new feature. Safari indeed supports it; Explorer Mac shows the second background image, but not the first, and Explorer Windows, Mozilla and Opera don't show anything.

This is the blog of Peter-Paul Koch, mobile platform strategist, consultant, and trainer. You can also follow him on Twitter.
Atom RSS

I’m speaking at the following conferences:

(Data from Lanyrd)

Categories:

Monthlies:

Comments

Comments are closed.

1 Posted by Masklinn on 3 August 2005 | Permalink

Would it be possible for the (poor) MACless visitors to get a screenshot of the correct rendering?

2 Posted by ppk on 3 August 2005 | Permalink

Sure, done.

3 Posted by Zach on 3 August 2005 | Permalink

Very cool. I've been waiting for this for a while along with background-size:... I would say multi backgrounds will help with the Sliding Doors technique but we won't needto use it anymore after background-size is introduced.

4 Posted by graste on 3 August 2005 | Permalink

Are multiple background images in a standard anywhere? When it is not I doubt that any other browser will implement this neat little thing.

5 Posted by 4rn0 on 3 August 2005 | Permalink

@graste
> Are multiple background images in a standard anywhere?

I believe they are part of CSS3. Have a looking at the working draft module regarding backgrounds and borders.

http://www.w3.org/TR/2005/WD-css3-background-20050216

6 Posted by roberocity on 3 August 2005 | Permalink

Makes sense to allow this. I could have used it a while back when I needed a column of color to go full height and a background image. Not an easy task. Made it work in Mozilla/Firefox, but not in IE.

Generally, I don't really care for Safari, but this a neat feature and I look forward to seeing it in all the browsers.

Question: I assume one of your images had more transparent space on the left side so as not to hide what was in the first image.

Could really be fun to play around with PNG's alpha transparancy and multiple background image.

Very cool.

7 Posted by Masklinn on 3 August 2005 | Permalink

Thanks a lot for the image version ppk
@4rn0: dead on, multiple backround images are indeed part of the CSS3 specification, and are currently being worked on (the guys working on it asked for feedback a short time ago)

8 Posted by Jacob on 4 August 2005 | Permalink

roberocity: No, I believe that PPK set the background position for each background individually (see the CSS code on his test page).

This could be great once it is supported well enough. Alas, I don't own a Mac and so can't run Safari, but hopefully Mozilla will support it before too long :-) It tends to be quite good at supporting things like this (usually with the "-moz-" prefix though).

9 Posted by s4ndp4pper on 4 August 2005 | Permalink

This is really neat, and Safari is a great no-nonsense browser with terrific standard support.

But I'd rather see the Safari team working on, for example, CSS styling support for form elements.

10 Posted by s4ndp4pper on 4 August 2005 | Permalink

Well actually, they do: http://webkit.opendarwin.org/blog/?p=17

11 Posted by Jaffa The Cake on 4 August 2005 | Permalink

If the background to your site is a flat colour, multiple backgrounds are a great way to add corners to a paragraph / div / whatever.

I know rounded corners are part of CSS3, but with multiple backgrounds you could make a paragraph with a rounded corner on the top left, a 45 degree corner on the bottom right, and a page curl on the top right.

It would look rubbish, but you see what I'm getting at. Beats lots of nested divs in your html or added via JavaScript