title: Can't get the picture to be in the background
body: <p>I've been trying to get a background picture to actually be in the back and not in the front. 
  I've tried with z-index, positioning en making divs in divs. But nothing really worked out.</p>
  
  <p>The Screenshot of the issue.: 
      <a href="https://gyazo.com/4e9ae692ce1280ba8ea0ec37cb54930b" rel="nofollow noreferrer">https://gyazo.com/4e9ae692ce1280ba8ea0ec37cb54930b</a></p>
  
  <p><strong>The above picture needs to be in the background so the box thing can go up in front.</strong></p>
  
  <p>The HTML code: </p>
  
  <pre><code>  &lt;div id="image"&gt;
    &lt;img src="DSC_0043.png" width="800" height="800"&gt;
    &lt;div id="content"&gt;
    &lt;div id="tabbox"&gt;-
    &lt;div class="tab"&gt;
  </code></pre>
  
  <p>Here follows like the actual content, which you of course don't need to know. it's just a bunch of text etc.</p>
  
  <p>The CSS code: </p>
  
  <pre><code> #image{
   position: relative;
   z-index: 2;
   } 
  
   #content{
   width: 75%;
   background-color: black;
   position: absolute;
   margin-left: 12.5%;
   padding-bottom: 5.5%;
   z-index: 1;
   }
  </code></pre>