Hello,

I'm trying to make a CSS page where I have a background image that lines up with some form fields on the page. I need the whole thing to be centered horizontally- so that when you resize the browser window, the form fields move with the background image. I've managed to get it to work fine in Safari, but in FF, the form fields jump across the page and the bg stays fixed when I resize the browser window. First I'm trying to figure out how to get the bg to move, then I'll worry about the forms. Here is some of my CSS:

Safari (first is the background image, second is content, third is a form field):

#backgroundWrap {
background-image: url('background.jpg');
background-position-x: -80px;
position: absolute;
top: 0px;
left: 0px;
min-height: 916px;
width: 50em;
}

#content {
width: 1100px;
position: relative;
top: 55px;
}

#emailField {
position: absolute;
top: 232px;
left: 435px;
width: 195px;
}



Firefox:



#backgroundWrap {
background-image: url('background.jpg');
background-position-x: -80px;
position: relative;
top: 0px;
left: 0px;
width: 1550
}

#content {
width: 1100px;
height: 1200px;
position: relative;
top: 55px;
scrolling: yes;
}

#emailField {
position: absolute;
top: 300px;
left: 510px;
width: 195px;
}

Lose all that position:absolute. How do you expect anything to 'flow' when you've removed almost everything from that flow ??

To center a background image, all you do is this:
background-position: center top;
or
background-position: center center;
or
background-position: center bottom;

Thanks everyone for your help.

Is it possible to do the same thing for a group of objects on the page? I'd like my form fields to move with the background image when you resize the window.

Thanks!