CODEWITHSUNDEEP
cssbackground-position
djt
djt

Reputation: 7535

CSS background-attachment fixed - out of flow?

I have some HTML like this:

<div id='container'>

    <div id='main'>

    </div>

</div>

And the CSS

div#container {
    width:960px;
    margin:0 auto;
}

div#main {
    background: #000000 url('images/bg_placeholder.jpg') no-repeat 85% 100px fixed;
    color:white;
    padding-bottom:30px;
}

The #main is the same width as its #container. Im trying to put a fixed background image on the top-right side of #main. However, when I put the background-attachment:fixed, it seems to remove it from the flow...

In that, the image, does not get placed in the top-right of main, but seems like the top-right side of the page, or possibly the container.

In scroll mode, it sits great in the main. it's only when a switch to fixed.

Is this how it works? Is there a way around this?

Upvotes: 1

Views: 1704

Answers (2)

Nathan Arthur
Nathan Arthur

Reputation: 9096

Not sure exactly what you're trying to achieve, but hopefully this at least partially answers your question.

I've recreated your situation here. Removing background-attachment:fixed; seems to fix your problem if I understand what you're trying to do correctly.

From the Sitepoint article on background-attachment:

The value fixed stops the background-image from scrolling with its containing block. Note that although the fixed background-image may be applied to elements throughout the document, its background-position is always placed in relation to the viewport. This means the background-image is only visible when its background-position coincides with the content, padding, or border area of the element to which it is applied. Thus, a fixed background-image doesn’t move with elements that have a scrollbar—see overflow—because it’s placed in relation to the viewport.

EDIT: Here's a possible way to solve your problem: http://jsfiddle.net/ep6kQ/3/

EDIT EDIT: Having issues getting the image to disappear when the user scrolls below the containing element. Anyone know how to fix this?

Upvotes: 1

Matthew Davis
Matthew Davis

Reputation: 116

Remove fixed and use your margin properties in CSS on the image. It's an ugly fix but it would probably work. Also might try using absolute instead of fixed. (I can't test at the moment, installing software.) Ugh.

Upvotes: 0

Related Questions