title: How to use a 1200px background while preventing horizontal scrollbars if browser width isn't 1200px wide?
body: <p>For my header, I have a repeating element that will expand whatever the browser width is -- 2000px, 4000px, etc. Inside the header element, I have a 1200px wide background that is fixed. My page layout is 960px wide.</p>
  
  <p>If I set the fixed with to 1200px, horizontal scrollbars will appear for users with a browser width below 1200px.</p>
  
  <p>How can I make it so people with a 1100px browser window will not see horizontal scrollbars?</p>
  
  <pre><code>header {
    background: #000 url("/images/bg-header-repeat.png") repeat;
    position: relative;
  }
  
  .header-wrapper {
    background: url("/images/bg-header.png") no-repeat left top;
    margin: 0 auto;
    min-height: 100px;
    width: 1200px;
  }
  
  .container {
    margin: 0 auto;
    width: 960px;
  }
  </code></pre>