title: div container background-image
body: <p>I created a div container. This container should get a background-image. The image is 1200 x 64px. If I write something in the div container, 1 picture should be fully shown. And if I write text over a height of 70px, 2 pictures should be fully shown. At the moment, I have to give the container a fixed height</p>
  
  <p>Here is <a href="http://skeptar.bplaced.net/image" rel="nofollow">my Page</a> + <a href="http://www.fotos-hochladen.net/view/background7j0b6tzhl1.png" rel="nofollow">the image</a> and here the Code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      margin: 0px;
      padding: 0px;
  }
  
  .div_mit_background {
      margin-right: auto;
      margin-left: auto;
      
      width: 1200px;
      
      background-image: url('http://img3.fotos-hochladen.net/uploads/background7j0b6tzhl1.png');
      height: 200px;
  }
  
  p{
      margin-left: 64px;
      color: white;
      padding-top: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link href='index.css' rel='stylesheet' type='text/css'&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
          &lt;div class="div_mit_background"&gt;
              &lt;p&gt;
                  Here is some content.
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>