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.
I spent several hours trying to figure out where my code was wrong. My background should have been fixed but when I tested in Chrome it moved. Finally I thought I would try it in Firefox, not really expecting anything different, and the image was fixed so my code had been correct all along. I added background-position: center top; and that fixed it in Chrome. Amazing! Thank you for posting this solution.