I am trying to write CSS code that will give me a fixed background and scrolling content. I need the content to be contained with it own separate back ground that scrolls with it. If someone could point me in the right direction so I can learn how to do this I would be highly appreciative. Thanks

6 Years
Discussion Span
Last Post by XinJiki

Its been a while since I've done that but the CSS should be:
background-attachment: fixed

Votes + Comments
Didn't deserve a downvote IMO. Upvoted +repped here.

sorry, wrong post...please ignore me or delete my post

Edited by lps: n/a


You're looking at the overflow property. Set the overflow property to scroll .

overflow: scroll

This will make your element boxes scrollable, and attach a background using the background attribute.


Yes, both are correct and it just depends on which method you are aiming for. Normally a browser will repeat a background image by default when the text flows beyond the browser's screen height unless the attached argument is set to fixed then the text will be moved by the browser's side scroll bar but the image will not move to compensate which makes the text seem to float over it. But this affects the entire browser screen.

Since it seems that you are trying to scroll only a certain segment then you should use both. Assuming that you would want to use a DIV as the 'container' you should create a CSS class for it which sets the overflow to scroll and specify the background image and have it "fixed" as well.

This way your whole site won't have a fixed background if not necessary but the content box will look how you want it to.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.