Multiple backgrounds and color opacity

Question

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

Have you tried just background: rgba(200, 54, 54, 0.5) url(../img/background.png) repeat; (without the "," between the rgba and the url ? Not sure what you want to do. This should render your background image with full opacity and your color with 0.5 opacity — Pierre Granger, Mar 25 '14 at 09:05
Pierre is right, if it works. The background image has priority over the color. So naturally, a color overlay isn't gonna work out. But when you set the opacity of the Background to 0,5, you allow half of the coloed background to shine through, which makes it look like there is a color overlay. — Nicky Smits, Mar 25 '14 at 09:10

score 6 · Accepted Answer · edited May 23 '17 at 11:57

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.}

Thanks for descriptive and fast reply, its working 100% now and i fully understand it. greatly appreciated. — Nicholas Ritson, Mar 25 '14 at 09:55

Multiple backgrounds and color opacity

1 Answers1