title: html css image always on top
body: <p>I have a problem with my website. I want a picture to be in the background and text in the foreground. My code is:</p>
  
  <pre><code>    &lt;body&gt;
  &lt;a id="Head"&gt;Gute &lt;a id="Head2"&gt;Server&lt;/a&gt;&lt;/a&gt;
  &lt;div id="bg"&gt;
    &lt;img src="bg.jpg" alt=""&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>and CSS:</strong></p>
  
  <pre><code>#Head   {
          font-size: 500px;
          color: #00DFFC;
  }
  #Head2  {
          font-size: 500px;
  }
  
  #bg {
    position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;
  }
  #bg img {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%;
    min-height: 50%;
  }
  </code></pre>
  
  <p>When I use this code the background is in the foreground and the text is invisible.</p>