How to Change a CSS Background Image’s Opacity

Nicholas Cerminara
👁️ 486,782 views
💬 comments
class="tile">

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.

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:

Table of Contents

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

    See the Pen How to Change a CSS Background Image's Opacity by Nicholas Cerminara (@ncerminara) on CodePen.

    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;
    }
    /* You could use :after - it doesn't really matter */
    .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.