CSS Background Image Opacity

CSS Background Image Opacity

<style>
article {
  position: relative;
  z-index: 1;
  background: transparent url('/path/to/your/image') no-repeat center center;
}

article::after{
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: 0.4; 
  z-index: -1;
  background: #000000;
}
</style>

<article>
  Text.
</article>

Note: ::before would work, too.

Reference:

http://stackoverflow.com/questions/10422949/css-background-opacity