How to Change a CSS Background Image’s Opacity

With CSS and CSS3 you can do a lot of things, but setting an opacity on a CSS background is not one of them. However, if you get creative, there are a ton of creative work-arounds you to make it seem like you’re changing the CSS background image’s opacity. Both of the following methods have excellent browser support down to Internet Explorer 8.

Tóm Tắt

Method 1: Use absolute positioning and an image

This method is exactly like it sounds. You simply use absolute positioning on an a normal img tag and make it seem like you used the CSS background-image property. All you have to do is put the image inside of a position: relative; container. Here’s what the HTML markup generally looks like:


<
div class
=
"
my-container"
>
    
<
h1>
Scotch Scotch Scotch
</
h1>
    
<
img src
=
"
http://placekitten.com/1500/1000"
>
</
div>

And here’s what your CSS will look like:


.my-container
 {
    position
:
 relative;
    overflow
:
 hidden;
}
.my-container h1
 {
    padding
:
 200px;
    position
:
 relative;
    z-index
:
 2;
}
.my-container img
 {
    position
:
 absolute;
    left
:
 0;
    top
:
 0;
    width
:
 100%;
    height
:
 auto;
    opacity
:
 0.6;
}

Finally, here’s a nice little demo on CodePen: http://codepen.io/ncerminara/pen/tncAi

Method 2: Using CSS Pseudo-Elements

This method is seems simple once you see it, and is definitely my preferred method of doing this. Using CSS pseudo-elements of either :before or :after, you a div with a background image and set an opacity on it. Here’s what your HTML markup would roughly look like:


<
div class
=
"
my-container"
>
    
<
h1>
Scotch Scotch Scotch
</
h1>
</
div>

And here’s what the CSS looks like:


.my-container
 {
    position
:
 relative;
    background
:
 #5C97FF;
    overflow
:
 hidden;
}
 
.my-container:before
 {
    content
:
 ' '
;
    display
:
 block;
    position
:
 absolute;
    left
:
 0;
    top
:
 0;
    width
:
 100%;
    height
:
 100%;
    z-index
:
 1;
    opacity
:
 0.6;
    background-image
:
 
url
(
'http://placekitten.com/1500/1000'
)
;
    background-repeat
:
 no-repeat;
    background-position
:
 50% 0;
    -ms-background-size
:
 cover;
    -o-background-size
:
 cover;
    -moz-background-size
:
 cover;
    -webkit-background-size
:
 cover;
    background-size
:
 cover;
}

Finally, here’s a nice little demo of this method:

data-theme-id=”0″ data-slug-hash=”eFzJI” data-default-tab=”result” data-user=”ncerminara” class=’codepen’>
See the Pen How to Change a CSS Background Image’s Opacity by Nicholas Cerminara (@ncerminara) on CodePen.

Method 1: Use absolute positioning and an image

Method 2: Using CSS Pseudo-Elements

mtoplist