背景图像定位问题

Question

I have this as my CSS styling. My #pg_wrap is not centering with the background image when the browser window is resized. The screen shot I have is when you reduce the browser window less than 1344px than the #pg_wrap width (the width doesn't have to be that, was just a test number).

The screen shot was taken with Firefox, which does it. Chrome does not do this. How do I get the background image to stay put?

Chrome

Firefox

body
{
    text-align: center;
    background-image: url('p_bg_75.jpg');
    background-repeat: repeat-y;
    background-color: black;
    background-attachment:fixed
    margin: 0px;
    padding: 0px;

}
#pg_wrap
{
    margin-left: auto;
    margin-right: auto;
    width: 1344px;
    height: 1000px;
    border: 1px solid white;
    text-align: center;
}

Answer 1

The difference is because the browsers handle incorrect css in different ways.

Change

background-attachment:fixed

to

background-attachment:fixed;

Answer 2

Did you forget to declare the background position? Remember that text-align does not align the background. As a single declaration, it seems like you're after:

background: #000000 url('p_bg_75.jpg') repeat-y fixed top center;

I can't tell by your question whether you really do want the attachment to be 'fixed', but based on your screen caps, I doubt it. So you can probably ditch that from the declaration too.

Answer 3

as advised above, try:

background-position: center;

and paste a snippet of the HTML so we can test in Safari/Chrome.

Answer 4

Normally with a center aligned site you are best off with using 2 background images. 1 background image is placed on the BODY and another background is placed on the center aligned DIV.

If the body has no margins like in your example and you make your browser smaller than 1344px you will not see the body background any more. To make sure that in cases the content is short, there are no strange effects you can give the DIV also a minimum height of 100%.

Maybe have a look at this site where this technique is also used: http://www.prgs.nl/