title: CSS Background image opacity affecting the children within it
body: <p>I have tried changing the image opacity in css. But that is affecting all the children inside it. I have looked upon many stackoverflow questions and answers, but still it's not working for me. Hence, decided to ask a question myself.</p>
  
  <p>My sample code :</p>
  
  <pre><code>&lt;div id="home" class="home"&gt;
  
  &lt;h2 style="margin-top:130px; text-shadow: #fff 0 0 10px;  color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;"&gt;Find the suitable tutor you are looking for..&lt;/h2&gt;&lt;br /&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>#home {
    background: url(../images/home1.png) no-repeat center center fixed; 
    display: table;
    height: 100%;
    position: relative;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /*opacity: 0.5;*/
  }
  </code></pre>
  
  <p>At first, I tried changing the opacity of the <code>div home</code>, but since it was eating up the text as well, so I decided to change the image opacity manually using GIMP.</p>
  
  <p>I changed it. Even then the text doesn't look to be having the actual color. So I tried making it glow by doing some <code>text-shadow</code> and stuff. Still I don't seem to get the actual text color. </p>
  
  <p><a href="http://i58.tinypic.com/2zin7f7.png" rel="nofollow">Original Image</a></p>
  
  <p>This is the actual picture without changing the opacity.</p>
  
  <p><a href="http://i58.tinypic.com/2q1hp8i.png" rel="nofollow">Image with changed opacity in GIMP</a></p>
  
  <p>This is the image after changing it's opacity in GIMP. </p>
  
  <p>I want the image to have this kind of opacity but the text color of the first image.</p>
  
  <p>Hope I am clear. I uploaded those images here, but since I don't have reputation enough so had to share the links after uploading in another website.</p>