Background-image opacity??

I came across same issue and I tried this workaround method. You control "opacity" by changing RGBA alpha channel (The last value with decimal number) to control how light or dark your image going to be. Also you can change "opacity" color (color cast) as well by using different RGB values. Hope this helps!

.image {
    background-image: url('your-image.jpg');
    background-color: rgba(255, 255, 255, 0.4);
    background-blend-mode: lighten;
}

I found an example that says you can do this & gives an example:

img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ }

http://www.w3schools.com/css/css_image_transparency.asp

Its good to know...

Hey! There is no css property for changing the opacity of the background-image. You can achive this in alot of different ways but here's two approaches:

div::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;   
  width: 100%;
  height: 100%;
  background-image: url('yourimage.jpg');
  background-size: cover;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Or you can apply similar styles to a child div instead of a psuedo element, like this:

<div class="hero-unit">
  <div class="hero-unit__background-image">
  </div>
</div>

.hero-unit__background-image {
  position: absolute;
  z-index: -1;   
  width: 100%;
  height: 100%;
  background-image: url('yourimage.jpg');
  background-size: cover;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

And always make sure the parent element has position: relative;

Use RGBA on the background background: rgba(255, 255, 255, 0.3);