CSS Division Background Image Positioning

[phaedrus10]

Ok. I have a web site I am working on and it is done in a two-column layout with a header across both columns at the top, a lefthand menu sidebar and a righthand division for the main content. I have a background image that I would like to show behind the main content only. I would like it to be fixed (not scroll with the content).

The problem is - when I do not fix the background, it centers on the correct division. When I do add the "fixed" code to the CSS, it jumps to positioning on the body. I would like the background to remain centered (horizontally) with the content division and allow the content to scroll over it... I would like it to remain centered (horizontally) when a user resizes their browser and not move out from under the content division.

I have tried center top, percentages and absolute positions for the background-position.

In other words - I want a background for a specific division only, but I would like it "fixed" and it won't work.

My code looks like this:

#middle_column { float:left; width:75%; margin:0px 20px; color:#660000; font-size:16px; text-align:justify; }

.post { background:url(../images/dove_25.gif) no-repeat center top fixed; margin-bottom:35px; line-height:18px; }

.post_body { padding:5px 15px; }

[Beverleyh]

A link the a live demo would be much appreciated - there's nothing like a fully-working, visual reference to kick-start the troubleshooting.

[phaedrus10]

http://csc.deamaree.com/

Thank you to anyone who can help figure this out.

[Beverleyh]

Sorry, I'm still finding your explanation a little hard to get my head around.

Can you try taking a few screen caps of the different effects youre getting please?

Or, create 2 versions of the page so we can easily see the difference?

[phaedrus10]

Ok. Let's see if this helps.

http://csc.deamaree.com

This site has the background "fixed" for the division class "post."

http://csc2.deamaree.com

This site has the background not "fixed" for the division class "post."

Both of them have "center top" for the position. The first one allows the image to remain stationary while you scroll the division content over it, but it doesn't center the background under the division like I'd like it to. The second one, centers the background, but the content does not scroll over it like I'd like it to.

If I place the background with an absolute position and "fixed" it will scroll over, but the background will not be in the right position if the browser window is resized by the user.

I just want it to center horizontally under the division (the actual content of the page) AND remained fixed so the content scrolls AND remain part of that division when the window is resized....

Thanks again.

[Beverleyh]

I think I understand - try looking at things slightly differently and changing your image dimensions like this one; http://i52.tinypic.com/119rt6e.gif

[phaedrus10]

I'm not really sure what you mean. I tried resizing the image and moving to the background my "everything" division, but I still have the issue that when the image is "fixed" it moves when the browser window is resized... it does not stay put... it will not stay underneath the division I want it to stay underneath.

[phaedrus10]

I figured out how to (mostly) do what I wanted. Thanks for all the help.

[Beverleyh]

You misunderstand - I already prepared an image with revised dimensions. Basically its the same image you used but with the dove pushed into the bottom right corner and extra background width and height added to the top and left. This puts the dove back centrally underneath the .post div without needing to change the CSS.

So, used in conjuction with your fixed background CSS at http://csc.deamaree.com you just need to replace your own dove image with the one I made for you: http://i52.tinypic.com/119rt6e.gif and everything is fine. It stays underneath the div that you want it to be under, its centered and doesnt move when the window is resized.