title: CSS: have a fixed height for image header
body: <p>I have a header that is styled like so:</p>
  
  <pre><code>header {
  position: relative;
  width: 100%;
  height:50%; 
  color: #fff;
  background-image: url(../images/header.jpg);
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  }
  </code></pre>
  
  <p>This fills up the whole screen, how can I make it a fixed height (in pixels)?</p>