Fixing a Background-position in Firefox vs. Chrome

I’ve had a time lately trying to get my background images to line up correctly on one of the sites I’ve been working on lately.

The site I was working on had a header image and a footer image and a repeating background image.

All three of these images need to line up correctly along the x-axis to look seamless.

When I got this working well in chrome, it looked awful in Firefox.

Finally, after some trial, error and investigation I found the following fact:

From the w3schools background-position page: ‘Note: For this to work in Firefox and Opera, the background-attachment property must be set to “fixed”.’

I had this:

//
body {
    background-position: center top; 
}
//

And I changed it to this:

//
body {
    background-attachment:fixed;
    background-position: center top; 
}
//

Now it works great! Hopefully that will save a headache for some of you.