title: Scaling CSS Header
body: <p>I am attempting to set up a scalable background image for my header, just based on the width of the browser window (for now).
  Right now, with what I have, it scales in width just fine.  But the header itself does not change height, it's stuck with the height of the lines of text.  If I have no text, it doesn't appear at all.  When I resize the window larger, the bottom of the header image does not show.  I have tried setting min-height to various different values and it is not doing what I need.</p>
  
  <p>I want it to scale the height of the header based on the image.  If the window is tiny, it will scale down to the height of the text lines.  If it is large, it will scale <em>larger</em> than the text lines.
  Is it possible?  I have seen other sites where it works just fine.  I have found instructions how to do it ... in certain specific themes in WordPress.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
          &lt;p&gt;
              Line 1&lt;br&gt;
              Line 2&lt;br&gt;
              Line 3&lt;br&gt;
              Line 4&lt;br&gt;
              Line 5&lt;br&gt;
          &lt;/p&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>header {
      background-image:url('./waybackIMG_1496.jpg');
      background-size : cover;
      background-repeat : no-repeat;
  }
  header p {
      line-height     : 1.2em;
      text-align      : right;
  }
  </code></pre>