Setting opacity on only background image with rgba()

Question

I have looked at this post which gave a clear description on how to set only the parent background image's opacity without affecting the children elements: HTML/CSS text background transparent but text not

However, how do I set a background-image along with the opacity? Originally, I used opacity like this (but the children elements were affected too):

.content {
    background-image: url('link/url/image.jpeg');
    opacity: 0.35;
}

But after looking at the SO post linked above, I tried this:

.content {
    background-image: url('link/url/image.jpeg');
    background: rgba(255, 255, 255, 0.35);
}

But it seems like the background rgba() values aren't doing anything. I've also tried:

.content {
    background: rgba(255, 255, 255, 0.35) url('link/url/image.jpeg');
}

But then the background isn't displayed.

depending on browser requirements you could look at the Daniel's answer in this post: http://stackoverflow.com/questions/10422949/css-background-opacity — JanR, Nov 08 '16 at 03:40
@AllDani.com I thought that would work, but setting `opacity: 0` on its children didn't affect it. — patrickhuang94, Nov 08 '16 at 04:45
@AllDani.com I already posted what I tried in the question. But I have it resolved by setting the opacity background image as the default image. — patrickhuang94, Nov 08 '16 at 05:36
You mean you changed the actual image? Oh no.. There must be a better solution! If interested, post what you tried with setting children to 0 etc, maybe someone (maybe myself) will find an answer to that. — Daniel Springer, Nov 08 '16 at 05:37

score 2 · Answer 1 · answered Nov 08 '16 at 03:53

In your case the background-color can not be seen because the image goes on to color, and if it is not transparent does not display it.

There is not currently an attribute that can be assigned a transparency only to the background-image.

If you want a transparent background-image without any kind of effect or transition in hover you can directly use an image in .png format saving it with a transparency.

Otherwise you will need to create a container in "position: relative" and "overflow: hidden" with an internal image and another container in "position: absolute" with text or other inside. In this way you can assign transparency only to the image without affecting the rest also.

Can you elaborate more on your last paragraph? Not really following you. — patrickhuang94, Nov 08 '16 at 04:50

score 1 · Answer 2 · answered Nov 08 '16 at 03:42

1

Try this out:

.content::after {
  content: "";
  background: url('link/url/image.jpeg');
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

answered Nov 08 '16 at 03:42

Derek

852
9
19

Setting opacity on only background image with rgba()

2 Answers2