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. How can I do that?

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.

Which browser you are testing it? and possible duplicate of http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text — Arpit Srivastava, Sep 26 '12 at 16:16
You used double quotes within double quotes, try style="background-image:url('image.jpg');opacity:0.5;" — ayunami2000, Oct 10 '17 at 18:59

score 89 · Answer 1 · answered Nov 01 '16 at 19:09

89

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

answered Nov 01 '16 at 19:09

Carlos2W

2,024
2
16
19

3

Great answer! much cleaner solution, but unfortunately does not work on IE. – tsvikas Jan 24 '17 at 20:14
7

@tsvikas Nothing works on IE. Honestly, I've quit considering IE while writing web pages unless it's about protecting data. :-P – progyammer Jun 20 '17 at 08:58
1

@progyammer With an 8% market share, it really isn't worth the overhead required to support it any more. I'd say that Microsoft took their shot at cornering the browser market with a proprietary version and they lost. (Thank goodness.) We'll see if Edge makes any serious inroads into Chrome's position. – BobRodes Apr 01 '18 at 19:20
1

@BobRodes it would be so awesome of my clients would understand this. – Diederik Apr 30 '18 at 21:33
@Diederik On the positive side of that, the ability to deal with Microsoft's eccentricities means that you get to bill more hours. :) – BobRodes May 02 '18 at 04:29
@Diederik As another saying goes, money isn't everything, but it sure helps. – BobRodes May 10 '18 at 06:24
I know this won't work on IE/edge. But this should be the clearest and simplest solution if you don't need to consider IE/edge. Otherwise, you may need to use :before :after to handle the effects. – lewishole Mar 13 '19 at 06:52
1

wow - i used `background-blend-mode:darken;` with `background-color:rgba(0,0,0,0.6)` and it was exactly what i needed...i don't know how i missed this css property...but this is what i was looking for! – WEBjuju Oct 31 '19 at 02:04

score 31 · Answer 2 · answered Sep 26 '12 at 16:35

31

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

answered Sep 26 '12 at 16:35

Alexey Ivanov

8,128
2
26
27

I love it - thank you. The only thing is that I don't think you can programmatically change the background image - you have to hardcode it into the css files... – Spock Nov 29 '16 at 09:45
you have to hardcode it into the css files >> perhaps you could add it as an inline style ... style="background-image: url('image.jpg')" – Ankur Sep 05 '18 at 17:02
is there a way to tweak this up for paralax scroll effect ? – GrowLoad Aug 08 '23 at 16:36

score 20 · Answer 3 · edited Feb 15 '21 at 08:40

20

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.

edited Feb 15 '21 at 08:40

OXiGEN

2,041
25
19

answered Aug 19 '20 at 09:54

Shreyas Shrawage

340
2
10

score 13 · Accepted Answer · answered Sep 26 '12 at 16:19

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.

2021 update: It appears `rgba()` is now supported for `background`. See @Nur Nas or @Shreyas Shrawage answers. — OXiGEN, Feb 15 '21 at 00:51

score 6 · Answer 5 · edited Feb 15 '21 at 07:54

6

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.

edited Feb 15 '21 at 07:54

OXiGEN

2,041
25
19

answered Jan 30 '21 at 03:54

Nur Nas

61
1
2

score 4 · Answer 6 · edited Mar 18 '15 at 20:32

4

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

edited Mar 18 '15 at 20:32

j08691

204,283
31
260
272

answered Mar 18 '15 at 20:29

deki.bg

41
1

score 0 · Answer 7 · answered Apr 27 '17 at 20:03

0

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; ?>');

answered Apr 27 '17 at 20:03

basd

31
2

score -1 · Answer 8 · edited Jul 07 '17 at 02:18

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

score -3 · Answer 9 · edited Nov 16 '15 at 23:10

-3

and you can do that by simple code:

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

edited Nov 16 '15 at 23:10

John Slegers

45,213
22
199
169

answered Apr 27 '13 at 05:28

Ahmad Balavipour

31
2

Change background image opacity

9 Answers9

Linked

Related