Have a background image with a transparent colour

[ItsMatt]

I’d like to be able to have a background image with a transparent colour covering the image. But when I try to put background-image: url(mylocation);
background-color: darkgray;
opacity: 0.5;
inside the body {} tags, the image shows, but not the colour, and everything else is transparent. I’m pretty sure that everything else is transparent because they’re all child section of the body, but how would I fix this, so that it’s the way I’d like it to be?

Thanks!

[Paulie_D]

Well you have a few options…the most obvious being to change the image in image editing software.

The second is a pseudo element on the body like so

http://codepen.io/Paulie-D/pen/GAKkz

and third (which is a little more complex) multiple background ‘images’ where the ‘ transparent color’ is a gradient (albeit one that doesn’t change)

http://codepen.io/Paulie-D/pen/onBut

[Author]

Posts