title: Fixed background image horizontally connected to content with fixed width
body: <p>The problem is: I have a huge background image and content with those characteristics:</p>
  
  <ul>
  <li>the content is centered with <code>margin: auto;</code> and it has a fixed width</li>
  <li>the position of the content is in relation to the image (like it fits in the middle of the image)</li>
  <li>this connection is only horizontally (vertical scrolling moves everything around as expected)</li>
  </ul>
  
  <p>This works fine, actually, on desktop devices with position fixed on the background image.</p>
  
  <p>But the problem is: When I resize the window until it's smaller than the content, the content is fixed on the left side, but the background image is still centered, as expected. In this case the connection between both elements gets lost.</p>
  
  <p>I have this JavaScript that does the trick, but this is of course some overhead I want to avoid as it isn't smooth anytime due to the calculation:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(window).resize(function(){
      container.css('left', (body.width() - img.width()) / 2);
  });
  </code></pre>
  
  <p>I also tried things like that:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="test" style="
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%:
      height: 100%;
      background: transparent url(path) no-repeat fixed center top;
  "&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But this results in the same issue described above.</p>
  
  <p>Is there any elegant CSS solution for this problem?</p>
  
  <p><strong>Demo</strong></p>
  
  <p><a href="http://jsfiddle.net/48EU9/" rel="nofollow">Try it yourself</a></p>
  
  <p><strong>NOTE</strong></p>
  
  <p>The image size is fixed and known and it never gets scaled by the browser.</p>