Multiple backgrounds and color opacity

Issue

im trying to figure something out.

i have a simple webpage with a pattern background that is repeated, what i want to do in css is create a color overlay using multiple backgrounds. my code is this.

html,body {
background: 
rgba(200, 54, 54, 0.5),
url(../img/background.png) repeat;
}

however it makes nothing show, just a white screen, if i switch the background positions and put the image on top then i can see it does find the image and displays that but obviously with no color overlay.

did i miss something in how i think this should be working? does it not work on the html,body tags?

any help is greatly appreciated. Thanks Nick

Solution

rgba() is a color value. You can only have a color value in the last background layer; specifying a color on any other layers makes the syntax invalid.¹

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 body and the image to html:

html {
    height: 100%;
    background: url(../img/background.png) repeat;
}

body {
    min-height: 100%;
    background: rgba(200, 54, 54, 0.5);
}

Just keep in mind that body needs to cover the entire area of html as well, otherwise your color will only overlay part of the background image. The height and min-height styles above enforce this for height; for width, you will need to make sure body does not have any side margins or a width that's less than 100%.

See this answer for a more extensive write-up on both approaches to html and body backgrounds.

---

¹ _{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 image 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.}

Answered By - BoltClock