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.