Background image not sizing correctly with browser zoom

Question

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: http://www.bemidjisportsonline.com, 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: http://prntscr.com/19e59r.

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;
}

Answer 1

You need to change the background-size. Like this:

header {
  width: 100%;
  position: relative;
  background: url(/_images/header_trees.png) no-repeat;
  background-size: 100% 100%;
  height: 7em;
}