title: How to fix background image inside div
body: <p>I've discovered a rather odd problem, which I think I know how to explain; i just don't know how to fix it!</p>
  
  <p>I have a page with a div#container (a div with 100% min-height (height for IE)) containing a header, a "page-content" and a footer. The background image of the div#container is supposed to be fixed (not fixed position but <code>background-attachment: fixed</code> which makes the picture follow when you scroll).</p>
  
  <p>The problem is, that when fixed attachment is added to the background-tag in CSS, the background picture is now positioned outside the div.</p>
  
  <p>The CSS is as follows: (without <code>background-attachment: fixed;</code>)</p>
  
  <pre><code>div#container {
      position:relative;
      width:900px;
      margin:0 auto;
      background-color: #ccffff;
      background-image: url("pics/sign.jpg");
      background-repeat: no-repeat;
      background-position: right top;
  
      height:auto !important;
      height:100%;
  
      min-height:100%;
  }
  </code></pre>
  
  <p><code>margin:0 auto;</code> is to center the div and the <code>!important</code> thing in the first <code>height:</code> is to make IE ignore that particular height-tag. This is required if <code>min-height: 100%</code> should work.</p>
  
  <p>When I add this...</p>
  
  <pre><code>div#container {
      position:relative;
      width:900px;
      margin:0 auto;
      background-color: #ccffff;
      background-image: url("pics/sign.jpg");
      background-attachment: fixed; //This is what is added to the code-sample
      background-repeat: no-repeat;
      background-position: right top;
  
      height:auto !important;
      height:100%;
  
      min-height:100%;
  }
  </code></pre>
  
  <p>...the background picture is moving outside of the div. Let me explain this: The only visible part of the background image is what is still inside the <code>&lt;div id="container"&gt;</code> but a part of the image has moved outside the div and is now invisible.</p>
  
  <h2>To sum up...</h2>
  
  <p>When the background image is fixed, the background image is partly hidden, moving outside the div. The image is positioning to the top right of the <strong>browser window</strong>, not to the top right of the div.</p>
  
  <p>Hope you guys can help me!</p>