Change background image opacity

Question

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

Answer 1

What I did is:

<div id="bg-image"></div>
<div class="container">
    <h1>Hello World!</h1>
</div>

CSS:

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;
}
#bg-image {
    height: 100%;
    width: 100%;
    position: absolute;
    background-image: url(images/background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
}

Answer 2

You can't use transparency on background-images directly, but you can achieve this effect with something like this:

http://jsfiddle.net/m4TgL/

HTML:

<div class="container">
    <div class="content">//my blog post</div>
</div>​

CSS:

.container {  position: relative; }

.container:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-image: url('image.jpg');
   opacity: 0.5;
}

.content {
    position: relative; 
    z-index: 2;
}​

Answer 3

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.

Answer 4

and you can do that by simple code:

filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;

Answer 5

Nowadays, it is possible to do it simply with CSS property "background-blend-mode".

<div id="content">Only one div needed</div>

div#content {
    background-image: url(my_image.png);
    background-color: rgba(255,255,255,0.6);
    background-blend-mode: lighten;
    /* You may add things like width, height, background-size... */
}

It will blend the background-color (which is white, 0.6 opacity) into the background image. Learn more here (W3S).

Answer 6

Try doing this:

background-image: url(*your URL*);
background-color: rgba(255, 255, 255, 0.486);
background-blend-mode: overlay;

worked in my case. You can reduce or increase the background-color alpha value according to your needs.