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

The solutions is using:

{-moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(bg.png) repeat 0 0;}  

instead of:

rgba(0, 0, 0, 0.5)

Answer 2

It should be background: rgba(255,0,0,0.2) url("static/menubg.jpg"); without the ,

Answer 3

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.

Answer 4

You should note that because gradients are treated as images it is acceptable and works to put in a gradient that has the same top and bottom colour.

Answer 5

The syntax for background in CSS3 Backgrounds is [ <bg-layer> , ]* <final-bg-layer>, which means zero or more <bg-layer>s and then a single <final-bg-layer>, separated from each other by commas. See http://www.w3.org/TR/css3-background/#the-background

A <final-bg-layer> is defined as:

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || 
                   <repeat-style> || <attachment> || <box>{1,2} ||
                   <'background-color'>

whereas a <bg-layer> is:

 <bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? ||
              <repeat-style> || <attachment> || <box>{1,2}

(both definitions at http://www.w3.org/TR/css3-background/#ltbg-layergt ).

Or in simple terms, only the lowest background layer can include a background color. So yes, your CSS is in fact a syntax error.

Oh, and looks like https://developer.mozilla.org/en/css/multiple_backgrounds had some errors in it. I've fixed them.

Answer 6

Going off of Oscar's nice solution (thanks!), here is how I implemented it using SASS/Compass to automate browser prefixing

@include background( linear-gradient( color-stops(rgba(255, 66, 78, 0.25), rgba(255, 66, 78, 0.25)) ), image-url('/img/cardboard_flat.png') );

This supports Webkit, Firefox, but not IE9 (because of the gradient). Then I remembered the awesome compass rgbapng Ruby gem for generating PNGs: https://github.com/aaronrussell/compass-rgbapng

@include background( png_base64( rgba(255, 66, 78, 0.25) ), image-url('/img/cardboard_flat.png') );

Now, this supports IE9+ and the rest of the browsers that support multiple backgrounds.

If you still need IE8 support, you could either use a multi-background polyfill, or style an ::after pseudo element and absolutely position it, with a z-index of -1:

html {
  height: 100%;
}

body {
  background: url('/img/cardboard_flat.png');
  position: relative;
  padding: 1px 0;
  min-height: 100%;

  &:after {
    content: "";
    position: absolute;
    background: png_base64( rgba(255, 66, 78, 0.25) );
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }
}