If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS Division Background Image Positioning

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.

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....

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.

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.