How to fix background image inside div


Tags: css,html,attachment,fixed

Problem :

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!



Solution :

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.


    CSS Howto..

    How generate width html element to fill rest of width window

    How to remove zoom effect of tile(metro ui css) using javascript

    How make something like Facebook Notifications?

    How to change colour of Bootstrap scroll spy and why won't my logos resize?

    How to change first word color through css [duplicate]

    show content block on right above the content on right when displaying on mobile

    In CSS, how can I make a div as high as the entire page?

    CSS How to hide current child menu items when hovering over parent's sibling items without javascript

    How can I fix the footer to dynamically change with height of the grid sections as they increase?

    I can't figure out how to get display property to work when it comes to multiple div elements

    How to use JavaScript OnResize with delay or less processing intensive

    Two navbar-inner on the same page how to change the padding of each?

    How to Implement this UI with CSS [closed]

    How do you ad stylesheets to JSDOM

    How to highlight a table row upon hover conditionally based on table cell values with CSS and jQuery?

    How to figure a text box set of characters into a text box figure 2 effect?

    How to create a circle and a bar that overlap with css?

    How to change CSS according to user Operating System

    How to pause css animation?

    How to correctly set the column widths on my HTML table?

    How to right align last two columns of a table with CSS

    How to display a list in horizontal groups of li elements?

    How many digits after the decimal point are interpreted in stylesheet rules?

    How to use HTML/CSS to show images and titles inline?

    How to give fadein effect to a div tag using CSS

    How to properly display content when I resize the window?

    How to solve this (seemingly simple) formatting problem in CSS?

    How does one create a div that extends to the bottom of the page?

    How can I target an id=“last_name[]_field” with css

    How achieve rounded shadow behide a rounded element using css3