title: Background Image opacity not working [HTML/CSS]
body: <p>I am trying to set my background image to opaque keeping the content clearly visible. So far what I have tried do not seem to work. Here is my code. Any suggestions would be of great help</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   
  
   &lt;head&gt;
              &lt;title&gt;&lt;/title&gt;
          &lt;style type="text/css"&gt;
          body {
            z-index: -1;
            opacity: 0.9;
          }
          &lt;/style&gt;
          &lt;/head&gt;
          &lt;body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');"&gt;
          
          &lt;div class="container"&gt;  
          
              &lt;h2&gt;Scotch Scotch Scotch&lt;/h2&gt;
            &lt;p&gt;In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.&lt;/p&gt;
          
          &lt;p&gt;Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!&lt;/p&gt;
          
          &lt;/article&gt;
            
            
          &lt;/div&gt;
          
          &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>