Transparent color above the image without a wrapper

Question

I am trying to add a translucent color layer to the top of the image for a background div. I tried the following:

background: url('myImage.jpg'), rgba(0,0,0,0.5); 

Besides

 background-image:url('myImage.jpg'); background-color:rgba(0,0,0,0.5); 

But in both cases, only the image appears. I know that I can wrap this div in another div with color, but is there a way to do it all in one div?

Answer 1

Use the selector :after . This may solve your problem.

 .container:after { content: ""; display: block; width: 300px; height: 200px; background-color:rgba(0,0,0,0.5); } 

An example here is http://jsfiddle.net/ecYrS/2/

Answer 2

CSS does not support what you are trying to do initially - you will need to lay out an RGBa layer above the image. Basically you want a translucent layer above the background image, but CSS will set priority on the background image, essentially overriding any background color.

One thought: you can try alpha transparent PNG, but I'm not 100% on that.

Answer 3

@Flynn is facing the same problem you mentioned. I came up with a pretty convenient solution.

There is a way though!

Instead of using a transparent fill color with rgba () or hsla (), we can use a gradient. Gradients are technically background images and therefore do not obey the rule that they cannot be the first (at the top) in stacking order.

 /* Working method */ .tinted-image { background: /* top, transparent red, faked with gradient */ linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), /* bottom, image */ url(image.jpg); } 

For more information, please study the following link:

background color image