[html] 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.

EDIT:

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

<div>
 //my blog post
</div>

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
</div>
</div>

But it is not working.

You can create several divs and do that:

<div style="width:100px; height:100px;">
   <div style="position:relative; top:0px; left:0px; width:100px; height:100px; opacity:0.3;"><img src="urltoimage" alt=" " /></div>
   <div style="position:relative; top:0px; left:0px; width:100px; height:100px;"> DIV with no opacity </div>
</div>

I did that couple times... Simple, yet effective...

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;
}

Try doing this:

.bg_rgba {
  background-image: url(https://picsum.photos/200);
  background-color: rgba(255, 255, 255, 0.486);
  background-blend-mode: overlay;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

<div class="bg_rgba"></div>

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

Responding to an earlier comment, you can change the background by variable in the "container" example if the CSS is in your php page and not in the css style sheet.

$bgimage = '[some image url];
background-image: url('<?php echo $bgimage; ?>');

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).

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;
}?

You can also simply use this:

.bg_rgba {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('https://picsum.photos/200');
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

<div class='bg_rgba'></div>

You can change the opacity of the color to your preference.

and you can do that by simple code:

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