Preventing a background image jump

by Matthew James Taylor on 5 October 2007

Preventing a 'background image jump' when changing the page length

I discovered this little problem while working on a website with a vertically repeated background image and 'dynamic tabs'. When a tab was clicked, JavaScript displayed the relevant content without a page refresh (very neat). The only problem was, the background image jumped up or down at the same time. What was going on?

See an example of the background image jump in action »

It turns out that each tab contained a different amount of text so switching tabs caused the overall page to change in length. This was part of the cause. The other contributing factor was the background image position. The image was vertically centered; this meant it was relative to the middle of the page, not the top. When the page length changed, the background image moved relative to the top of the page. This was what made the image jump.

The solution

Simply, align your background image to the top of the page and the problem will disappear. It's a good idea to always do this because changing the text size in your browser will also trigger the problem and this can be done on all types of pages.

The background image jump fixed »

Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor