The problem I am having is that at lower resolutions on certain browsers the middle background texture (between the header and the footer) is sometimes misaligned with the header and footer background images.
ALSO, when you resize the window the header and footer are basically locked in place but the middle background image resizes and looks screwed up.
Does anyone know how to fix it so the middle background image stays fixed like the header and the footer?’
Instead of placing the background image on the <body> element, place it on the
wrapper (.art-sheet) div. To make the page stretch to 100% height, check out this tutorial:
That link I posted has some very specific instructions for setting your page to 100% height. Read through that, have a go at doing it (perhaps on a test page) and post a link to it here if you have trouble.
Once that’s done, move the background image on the <body> element to the art-sheet div instead.
It may be the only solution for some browsers to move the background to an inner element. Sometimes you can hide the overlap by allowing the image to overlap a bit but it does depend on the time of image and how things have to match up.
Oops, I should have known that. Thanks Paul. Just testing in Safari, the jog happens both with the original example and in the example with the left padding. So it seems the 100% height one is the only option for that browser. Edit: O Chrome too, of course.
Thanks guys! It was an easy fix, I just cut the single line of the background image and pasted it in the .art-sheet section and it worked like a charm! Thanks so much to everyone and especially to ralph.m!
lol
Thanks Paul. Just testing in Safari, the jog happens both with the original example and in the example with the left padding. So it seems the 100% height one is the only option for that browser. Edit: O Chrome too, of course.