 <p><code>rgba()</code> is a <a href="http://www.w3.org/TR/css3-color/#rgba-color" rel="nofollow">color value</a>. <a href="http://www.w3.org/TR/css3-background/#the-background" rel="nofollow">You can only have a color value in the last background layer</a>; specifying a color on any other layers makes the syntax invalid.<sup>1</sup></p> <p>If you need to overlay the background image with a semitransparent color, the only workaround for one element is to create an image of that color and overlay that instead. But since you're trying to apply a page background, you should be able to simply apply the color overlay to <code>body</code> and the image to <code>html</code>:</p> <pre><code>html { height: 100%; background: url(../img/background.png) repeat; } body { min-height: 100%; background: rgba(200, 54, 54, 0.5); } </code></pre> <p>Just keep in mind that <code>body</code> needs to cover the entire area of <code>html</code> as well, otherwise your color will only overlay part of the background image. The <code>height</code> and <code>min-height</code> styles above enforce this for height; for width, you will need to make sure <code>body</code> does not have any side margins or a width that's less than 100%.</p> <p>See <a href="http://stackoverflow.com/questions/10947541/applying-a-background-to-html-and-or-body/10947583#10947583">this answer</a> for a more extensive write-up on both approaches to <code>html</code> and <code>body</code> backgrounds.</p> <hr> <p><sup>1</sup> <sub>It's understandably puzzling why colors are forbidden from any layer except the bottom one considering that color values with alpha channels exist and that you can still work around it with an <em>image</em> with the same alpha channels and the browser would still have to composite the background anyway. But that's just how it is, I guess. It doesn't look like this limitation is going to be addressed in Backgrounds level 4 either, so what do I know.</sub></p>