title: HTML/CSS repetitive + image header
body: <p>I got a header working but in a very ugly way, can someone please tell me the nice way to do this?</p>
  
  <p>I want to have an infinite header, with an image in the center. So I need to have a repetitive background-image, then put my image, and then continue the infinite image. I also have to do the infinite line below the image. Here is my working but ugly HTML code:</p>
  
  <pre><code>&lt;h1&gt;
      &lt;div align="center"&gt;
          &lt;img src="designs/header12.png" align="center"/&gt;
      &lt;/div&gt;
  &lt;/h1&gt;
  
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;h2&gt;&lt;/h2&gt;
  </code></pre>
  
  <p>I had to put a series of <code>&lt;br/&gt;</code> to be able to put h2 in the correct position. This is how h1 and h2 look like in the CSS:</p>
  
  <pre><code>h1 {
      background:url('../designs/headerPiece.png');
      height: 33px;
      width:100%;
      float:left;
  }
  h2 {
      background:url('../designs/headerPiece.png');
      height: 33px;
      width:100%;
  }
  </code></pre>
  
  <p>Any help appreciated!</p>