Try it Live

​x
 
<!DOCTYPE html>
<html>
 <head>
   <style>
     section.bgval {
       background:url(img/nature-girl-tiger.jpg);
       border: 2px dashed #BC7BB3;
       padding:40px;
     }
     .without-opacity {
       background-color: #eff1f4;
       padding:15px;
      
     }
     .with-opacity {
       background-color: #eff1f4;
       padding:15px;
       opacity:0.5;
     }     
   </style>
 </head>
 <body>
   <section class="bgval">
     <div class="without-opacity">
       <h4>div without Opacity property</h4>
       <p>some part of image is hidden and does not blend well.</p>
     </div>
   </section><br>
   <section class="bgval">
     <div class="with-opacity">
       <h4>div with opacity property</h4>
       <p>Text blends well with image and text is transparent</p>
     </div>
   </section>   
 </body>
</html>
​