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("static/menubg.jpg");

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

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 3

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 4

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