StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to fix background image inside div
text
Body
copied!<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><div id="container"></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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload