How to fix background image inside div

Question

I've discovered a rather odd problem, which I think I know how to explain; i just don't know how to fix it!

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 background-attachment: fixed which makes the picture follow when you scroll).

The problem is, that when fixed attachment is added to the background-tag in CSS, the background picture is now positioned outside the div.

The CSS is as follows: (without background-attachment: fixed;)

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%;
}

margin:0 auto; is to center the div and the !important thing in the first height: is to make IE ignore that particular height-tag. This is required if min-height: 100% should work.

When I add this...

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%;
}

...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 <div id="container"> but a part of the image has moved outside the div and is now invisible.

To sum up...

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 browser window, not to the top right of the div.

Hope you guys can help me!

Stiltner

Answer 1

This behavior is actually correct. Any background which is attachment: fixed will be relative to the viewport, not the element it is applied to. This is actually the basis of Eric Meyer's Complex Spiral demo.

Rakia

Is there any workaround that will cause the "incorrect behavior" I want? :) – Stiltner

Not that I've found. Sorry :-( – Rakia

I would also like a solution to this. I don't think he's asking why that happens, he's asking how to fix a scrolling image to a div. – Sundog

And, currently, there is no way to do it. This answer is the reason why. – Rakia

Answer 2

While you cannot have a fixed background position within a div, the easiest solution would be to create a div the size of your image. Make the image the background, and set it to position:absolute in the top right corner of the div you want it placed in using right:0px;top:0px. Be sure that the parent div is position:relative or it won't be positioned absolutely within that div.

Caprifig

Answer 3

Didn't have enough points to comment on the workaround above. Whilst you can use background-attachment: fixed for a div the image is still attached to the viewport and you only see a part of the image. Not much use if you are trying to display a complete image.

Agminate

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Kariekaril

Answer 4

You should try adding the background-origin property, maybe the border-box value will solve your problem. Also you might want to define background-size, keep in mind cover and contain are supported and very useful.

Bumblebee

Answer 5

This is approx. 10 years old question, but people might still end-up here seeking for a workaround, as I did.

The background-attachment property of CSS comes to the rescue.

Check working codepen here

And the snippet:

.fixed {
  background: url('http://lorempixel.com/800/800/');
  background-attachment: fixed;
height: 400px;
  width: 50%;
  max-width: 600px;
  margin: 32px auto;
}
.extra-space {
  margin-bottom: 100px;
  margin-top: 100px;
}

<div class="extra-space">
</div>
<div class="fixed"><h1>This is my heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="extra-space">
</div>

Poona

The issue is that when the div in question is not at the center, background-attachment:fixed does not work. As @Josh Stodola answered, the image is fixing itself to the viewport, not the div, as intended. – Lichfield