title: Make HTML body background image transparent
body: <p>I am trying to make my background image transparent, and the rest of the page not transparent, eg a faded background image on top of non faded HTML and CSS.</p>
  
  <p>I have an HTML page with an image as the background using a div. Below is a simplified version of the page:</p>
  
  <pre><code>&lt;HTML&gt;
  
  &lt;head&gt;
  
      &lt;style type="text/css"&gt;
          #backgroundImage {
              background-image: url('../Documents/images/Sea.jpg');
              background-repeat: no-repeat;
              background-size: 100%;
              opacity: 0.4;
              filter:alpha(opacity=40);
              height:100%;
              width:100%;
              z-index:0.1;
          }
  
          .main{
              height:500px;
              width:900px;
              margin:auto;
              background-color:green;
              z-index:1;
              opacity: 1;
              filter:alpha(opacity=100);
  
          }
      &lt;/style&gt;
  
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  &lt;div id="backgroundImage"&gt;
  
      &lt;div class="main"&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I found this setup in the following question:</p>
  
  <p><a href="https://stackoverflow.com/questions/8565969/how-can-i-make-my-websites-background-transparent-without-making-the-content-i">How can I make my website&#39;s background transparent without making the content (images &amp; text) transparent too?</a></p>
  
  <p>and it almost works, except that the whole page is transparent, not just the background image.</p>
  
  <p>I have tried adjusting the Z-index and opacity on the 'main' div, but it is not working.</p>
  
  <p>I feel this is a simple fix but I just cant see the solution.</p>
  
  <p>I also tried this question, but it did not seem to offer a solution:</p>
  
  <p><a href="https://stackoverflow.com/questions/14466102/how-do-i-make-my-background-image-transparent-in-css-if-i-have-the-following-cod">How do i make my background image transparent in CSS if I have the following code?</a></p>
  
  <p>and this one:</p>
  
  <p><a href="https://stackoverflow.com/questions/6890218/css-background-image-opacity">CSS background-image-opacity?</a></p>
  
  <p>I do not have sufficient reputation to post an image of what I am trying to achieve.</p>