title: Background image not sizing correctly with browser zoom
body: <p>I am having problems with a site's header displaying correctly when a person zooms in with the browser. The banner will cut off on the right side and show the body background image. The address to the site is: <a href="http://www.bemidjisportsonline.com" rel="nofollow">http://www.bemidjisportsonline.com</a>, Any ideas on a way to fix this? Thanks. I will post my CSS for the body, header, and banner elements below. A screenshot of what I am talking about can be found here: <a href="http://prntscr.com/19e59r" rel="nofollow">http://prntscr.com/19e59r</a>.</p>
  
  <pre><code>body{
      font: 100%/1.25 Arial, Helvetica, sans-serif;
      /*background: url(/_images/background-repeated.png) top center repeat-x;*/
      background: url(/_images/background_jersey_green.jpg) #010101 top center repeat-x;
  }
  
  header, nav, section, article, aside, footer {display:block;}
  
  header{
      width:100%;
      position: relative;
      background: url(/_images/header_trees.png) no-repeat;
      background-size: 100% auto;
      height: 7em;
  }
  
  #banner{
      z-index:100002;
      margin: 0 auto;
      width:75em;
      height:7em;
  }
  </code></pre>