A bunch of my testcases.

Thomas said on February 02, 2010

@Jonathan: Thanks for the great overview in your post!

@APE WEB: Jonathan's post inspired me to play with multiple backgrounds - here are examples for simple multiple background usage and also for JavaScript animations using multiple backgrounds: http://www.storiesinflight.com/html5/backgrounds.html

Ron said on February 03, 2010

will all this work in IE ?

Ape Web said on February 03, 2010

Hey, thanks for the examples, I was looking in Firefox stupidly and seen nothing but normal pictures (Jonathan) and blue backgrounds (Thomas) but I realised pretty soon that it is probably that my version of Firefox does not support this kind of CSS despite the vendor prefix -moz which seems to be ignored. (Firefox 3.5.7)

I took a look in Chrome and saw some interesting results (Jonathan) and some potentially useful results (Thomas). I had never heard of using multiple CSS backgrounds and things as I am too busy doing commercial work and don't work in the research and development department although I will be passing on the details.

I expect sometime in the future somebody will come up with a JavaScript fix to allow multiple backgrounds in some way or another to allow some graceful degrading as I don't think 1 background by itself is comparable to multiple backgrounds that need each other to work.

On the other hand, I have wanted something that allows me to apply multiple backgrounds to a layer for some time as it can be tricky to write semantic XHTML while achieving everything the designer has came up with.

Rajasekhar said on February 03, 2010

will all this work in IE ? and windows browsers? please let me know this.... waiting for ur response snook and ur effort is great

Matt Wiebe said on February 03, 2010

I'll step in and answer for Mr. Snook: no, this will not work in IE.

Gradients work in Safari 4 and Firefox 3.6.

Thomas said on February 03, 2010

Wow! I can't wait to see this working in all major browsers. Will be a great step forward!

me said on February 03, 2010

We waste alot of time with ie6 hacks for some people who "don't feel the need of upgrade" they dont't know how much we work just so they can see our site's in ie 6

Onderhond said on February 03, 2010

>> I'm also going to take a moment right now and rant about vendor prefixes.

Hear hear!!

Thomas said on February 04, 2010

@APE WEB: Elements with multiple background images are supported in Firefox 3.6, Safari 4.0.4 and in the latest version of Chrome. Firefox 3.5.x as well as IE don't support this feature - and in the case of IE we will at least have to wait for IE9.

Matthias Willerich said on February 04, 2010

But Jonathan, surely you'd want it mentioned somewhere that vendor prefixes are A Good Thing? :-)

I can vividly feel your pain during this transition period, but it's better than browsers attempting an implementation at one or the other CSS feature, fail at following the specs, and then you'd end up with a single rule that is interpreted differently across browsers. That's where all those underscore and funky comments hacks came from, no? Your background-size example somewhat proves my point: Chrome shouldn't have picked up the non-prefixed rule until they get it right (although I guess it doesn't hurt to explicitly specify both dimensions), and it's definitely good that the different approaches to gradients aren't using the fully fledged rule, as it could never work cross-browser as of now.

And with regards to you not wanting IE to be innovative: This is only down to their rare releases, right?
I mean, we're excited about all other browsers' innovations, want to use it in production while it's still smoking hot, and of course equally want browser vendors to compare notes of how they interpret the specs, and, once they support the real rule, all do the same thing across the board. If IE was releasing CSS rendering changes every few months or so, we'd love them to come up with experimental (prefixed!) implementations of every draft css rule we can think of, right?

Theo said on February 05, 2010

Even if all this stuff is not widely supported (will it ever be ?) is good to learn/now/use it, so thank you for this post. Bookmarked

Ape Web said on February 09, 2010

In most cases, people over do the nested divs. I go for a minimalistic and semantic approach when using divs and think others should follow this approach, and if the designer comes up with something snazzy then find a way of making the design work without bloating the page.

Although, saying that, this will not always be possible and therefore multiple CSS backgrounds will be very useful. Just because multiple CSS backgrounds will one day be supported, I think we should all stick to our roots and try and create semantic HTML first and worry about the CSS later.

Paul said on February 11, 2010

It's the first time I've read something about these Multiple Backgrounds. Very interesting. Thank you!

Oliver Cardiff said on February 11, 2010

I had a look at these features of CSS3 a while ago and would really like to use them on websites that I design but the only thing stopping me is IE as it doesn't support any CSS3 as of yet.

These are definitely good features and maybe I can use them on my personal site. Thanks for sharing this information.

Andrija Markovic said on February 16, 2010

Yep, one day this will all be very nice, hope that day comes soon...

Krishna said on February 24, 2010

a great read....really interesting!
I cant wait to use these new techniques soon. I just hope the dust settles with all the different requirements for different browsers...

thanks for sharing!

thinsoldier said on February 24, 2010


Have you tried simulating Photoshop's Gradient-Stroke with just css and without using a wrapping div?

I tried but haven't gotten very far:

Tab Atkins said on February 25, 2010

Matthias Willerich has it right - vendor prefixes are a Good Thing, as long as they continue being used as they currently are, as a way to do early experimentation with new features.

If browser vendors didn't use prefixes, we'd be in *tons* of trouble when some particular browser's impl gets popular but then we want to change the spec. Frankly, we'd be unable to. It would freeze mistakes in time forever.

A vendor prefix at least means that you know what you're getting into when you use it on your page. It's early, it's experimental, it might change before being finalized and losing the prefix. In the meantime, you can play with it and see if it meets your needs, and potentially get the spec changed if it's not good enough.

The whole situation does get confusing when there *is* significant change between implementations, I'll admit. The differences in webkit and mozilla-prefixed gradients make them pretty weird to work with right now. But that's because webkit came out first with an experimental implementation, I thought it sucked and wrote a new syntax that made its way into the Images module, and mozilla implemented the new one in the spec. It still might change *slightly* before we take Images to CR (which is the point at which it is appropriate to drop the prefix), but all the simple uses of -moz-*-gradient() should continue to be correct until the standard is finished.

That all said, good post! I just added Moz-style gradients to my company's site template, so you can see them used in action at http://www.igofigure.com. It's astonishing how much you can speed up a page load by swapping images of gradients for CSS-specified ones.

Scott Gale said on February 28, 2010

I have been researching how these pieces can create clean text rendering. This article was informative. I'm hoping to leverage CSS3 gradients and a 1px stroke to create text effects usually only relegated to Photoshop and sIFR.

Brendon Kozlowski said on March 18, 2010

Thank you for your tips here, Jonathan! The WebKit team's descriptions of gradient just was not as easy to comprehend and understand as yours. I now believe I actually understand the parameters that I'm using thanks to this blog post. Much appreciated!

Weetreuttom said on February 10, 2011

I'm really Glad i ran across this site.Added www.avmdanse.com to my bookmark!

rajkamal said on February 25, 2011

Thanks for the excellent post.


background:url(acceldom.jpg) 10px 5px no-repeat ,
url(Examples.gif) right 5px no-repeat,-webkit-gradient(linear, 0 0, 0 100%, color-stop(0,rgba(0,0,0,0)), color-stop(1,rgba(0,0,0,1))) 0px 0px no-repeat;
background-size:180px 250px, 20px 20px 10px 10px;

i was expecting the last gradient, to be of 10X10 size. But the gradient was spearding the whole paragraph.

joshbot ?£? said on March 30, 2011

Your "background-size: cover" tip ended days of frustration. Thank you VERY much.

Maurice said on April 19, 2011

This is an absolutely fantastic walk through. You just saved me a tone of work and extra lines of z-indexing for floaded div's and all sorts of ****.

Great, GREAT demos as well.

monochrom said on May 16, 2011

Hello There. Thanks very much for your article, very useful information! I'm dealing with gradients and background-images at the moment. I was wondering if its possible to combine these two, and YES it is :) Thank you!

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.