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

This demo shows the background image jump solution, see the problem in action here, and read the main article here.

Trigger the background jump by clicking the tabs below. Each tab has a different length of content and switching tabs changes the overall length of the page.

This tab only contains one line of text.

This tab has a lot of content. When it is selected the content appears and the overall length of the page grows longer. When the page changes length the background image changes position relative to the top of the page so it appears to 'jump' vertically. The distance that the background image jumps is relative to the change in height between the two tabs.

The problem can also be triggered when you change the text size in your browser. If you are using windows there is a quick way to do this: hold down the Control key then roll the wheel on your mouse.

Some line breaks here just to push the page longer then the height of your screen. If the page is shorter than your screen then the problem disapears.

More articles by Matthew James Taylor »