IE7 Background Zoom Bug

Internet Explorer 7 apparently ignores the body element when zooming. So if a background image is applied to the body, zooming the page spoils the layout, as the image isn't resized to match the zoom value. Only elements within the body are affected by zoom.

This page demonstrates the problem. The text here is inside a div which has been given a background image, as has the body. Note how the background on the div is resized on zoom, but not the background on the body behind it.

TIP: Click on the middle of the zoom button to loop through these values: 125%, 150%, 100%.

Workaround

A workaround is to put the whole page inside a div and fit it flush to the viewport (by setting zero margins on the body). Then add the background image to the div instead of the body. The image can then be resized on zoom. I have done this here, but made the div half the width so you can see the background behind.

Details

Coded by Chris Hester 14 November 2006 · Last updated: same day.