Multiple CSS backgrounds, colour over image, ignored

Question

What\'s wrong with this multiple background CSS line. Firefox 4 ignores it (as it does when there\'s a syntax error).

background: rgba(255,0,0,0.2), url(\"st         


        

Answer 1

Oddly enough it seems to come down to the order of the parameters; the background-image then background-color:

background: url('http://davidrhysthomas.co.uk/linked/astrid_avatar.png') no-repeat 50% 50%, rgba(255,180,0,0.8);

Works (JS Fiddle demo), while background-color then background-image:

background: rgba(255,180,0,0.8), url('http://davidrhysthomas.co.uk/linked/astrid_avatar.png') no-repeat 50% 50%;

Does not (JS Fiddle).

The above tested on Chromium 11 and Firefox 4, both on Ubuntu 11.04.

---

Edited to note that this does, indeed, come down to the order; as definitively answered in @Boris' answer.