title: I want the background to be visible over the Div elements
body: <p>I have created a page in which i have used an image as a background for it. and inside the body i have created div elements with background color. but my div element is overlapping over the body background image. I want my <strong>body background image</strong> to be visible over the <strong>div elements</strong>. 
  I have seen in some of  the sites that background is visible over the other elements.</p>
  
  <p>My html code is as follows:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div class="travel-section"&gt;
      &lt;div class="travel-inner-section"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
  /*background-color:rgba(0,57,77,1);*/
  background-image:url("../images/travel.jpg");
  }
  
  .travel-section{
  margin-right:4px;
  margin-left:4px;
  margin-top:120px;
  height:240px;
  background-color:#2ecc71;
  
   }
  
   .travel-inner-section{
  margin-right:4px;
  margin-left:4px;
  height:40px;
  background-color:#27ae60;
  opacity:0.5;
  box-shadow:2px green;
   }
  </code></pre>