Change background image opacity with css

Question

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 1

An alternative would be that you convert this background image file to the .PNG format and make the original image 0.2 opacity using a photo editing program but if you insist on using CSS, you can use the method below:

Since CSS does not directly support background image opacity, you can try using a pseudo-class to overlay another on your header and set opacity on it. Something along the lines of this should help:

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

.intro {
    position: relative;
    background: #5C97FF;
    overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.intro:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-image: url('../img/bg.jpg');
    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;
}

Answer 2

HTML code

<header class="intro">
<img class="IntroImg" src="../img/bg.jpg">
</header>

CSS code

.intro introIimg:hover {
opacity: 1.0;//Set your opacity
...

}

Hope it will help you.