Victor Mukherjee Victor Mukherjee - 10 months ago 75
HTML Question

Change background image opacity

I have a div element with text blocks and a parent div in which I have set a background image. Now I want to reduce the opacity of the background image. Please suggest how I can do that.

Thanks in advance.


I am looking to change the way my blog post looks at by editing the html content. The html code looks as follows:

//my blog post

I tried to surround the whole code above with a div element and set opacity of each div separately as below:

<div style="background-image:url("image.jpg"); opacity:0.5;">
<div style="opacity:1;">
//my blog post

But it is not working.

Answer Source

There is nothing called background opacity. Opacity is applied to the element, its contents and all its child elements. And this behavior cannot be changed just by overriding the opacity in child elements.

Child vs parent opacity has been a long standing issue and the most common fix for it is using rgba(r,g,b,alpha) background colors. But in this case, since it is a background-image, that solution won't work. One solution would be to generate the image as a PNG with the required opacity in the image itself. Another solution would be to take the child div out and make it absolutely positioned.