Here are two links to show the problem and the css code


This is a very abreviated example of a page I am having problems with. The screen resolution for seeing the issue is about 780px. You will need to reduce the screen viewing area to that to start with. I thought I had set the css code right to center the page but it doesn't and the fixed background image drifts to the right as the viewing area is expanded which resembles what happens with wider screen resolutions. The original page was designed to be a max width of 2200px so the problem is not evident on the majority of browsers but it is not solved either. What do I need to do to correct the problems? The green area is the body width and the blue is the main background div - reduce the screen area to view the image on the right.

The original page is is listed in the example but will probably need to be viewed across 2 monitors...

Thank you for any helpful comments.

1 answer

danwellman 5600

What is it you're actually trying to achieve? The simplified demo may be too simple for us to see the effect you're trying to get...

In the demo you have posted the right background-image is not staying where it should as you increase the browser width because its background-attachment style is set to fixed instead of scroll.

The page itself is not centering because it needs a width as well as margin:auto, and because the max-width of the body is set to 780px.

Changing these will fix the demo, but I'm not sure they will fix the actual problem without more information

Answered over 7 years ago by danwellman
  • If I were to change the max-width from the body to the containing pain div then it centers if I also remove the fixed from pain1 and pain2 divs. I do not want it to scroll but remain fixed since the length of the content wrap div will change from page to page and the fixed images are there for visual effect on wide browsers. So the centering issue is ok if not using fixed background images. So the problm is how is achieve fized backgreound images on the sides. Is the solution to not use them in the background and try some other tricks that will not scroll either left-right or up-down?? John Smith over 7 years ago