title: Background is only as wide as view-port
body: <p>Annoying problem!</p>
  
  <p>When I zoom-in on my view-port window (happens in Firefox, chrome) and then scroll horizontally to the right, my background images are clipped</p>
  
  <p>the images best depicts what's happening:</p>
  
  <p><strong>zoom in</strong></p>
  
  <p><img src="https://i.stack.imgur.com/1ACeW.png" alt="zoom in"> - image is only as wide as view-port</p>
  
  <p><strong>zoom way out - problem doesn't occur</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Eh5PF.png" alt="zoom out - problem gone"></p>
  
  <p>Here are some sections from my css which might be relevant:</p>
  
  <pre><code>article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body{ width: 100%; }
  header#header { width: 100%; }
  header#header #background-image {
    height: 150px;
    background: url(/images/header/silhouette.png) repeat-x;
  } 
  </code></pre>
  
  <p>This happens with and without cssgradients applied too - really stumped here</p>