EducateYourself EducateYourself - 6 months ago 21
CSS Question

Change background image opacity with css

I want to change header's background image opacity with css. Could you help me please.



.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(http://lorempixel.com/1910/500/nature/) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

<header class="intro">
...
</header>




Answer

You can change the opacity in programs like Photoshop or GIMP.

Or you can do that with opacity in css. But you probably don't want that since you will have some content in your .intro which will then also be affected by it.

So I suggest following solution

.intro {
    position: relative;
    z-index: 0;
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: black;
    background-color: transparent;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


.intro:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('http://www.planwallpaper.com/static/images/canberra_hero_image.jpg'); 
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

https://jsfiddle.net/q63nf0La/

Basically you add :after element that will be a background image , you position it absolute ( your .intro will need to be position:relative; ) and then you set the z-index and opacity.