title: Changing the opacity of background image in css
body: <p>I saw some similar questions regarding this. But my approach is different and none of those works to me. That's why I'm posting this.
  I want to change the opacity of background image without changing the opacity of child elements, where background-image is loaded inside the body tag. </p>
  
  <p>html :</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id = "background-div"&gt;
          &lt;div class = "header"&gt;
              &lt;div class = "ham-icon"&gt;
                  &lt;img src = "images/ham-icon.png"&gt;
              &lt;/div&gt;
              &lt;div class = "logo"&gt;
                  &lt;span class = "google-logo"&gt;Google&lt;/span&gt;&lt;span class = "hangouts-logo"&gt; Hangouts&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class = "profile-data"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class = "body"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>body
  {
      position: relative;
      background: url(../images/back1.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  </code></pre>