Something I was struggling with recently was a quirk in how Internet Explorer zooms in and out on content. All browsers allow you to zoom in and out of a page (usually using Cmd / Ctrl and the +/- keys). It’s rarely perfect, but some browsers are less than perfect than others.
Whilst all browsers these days use this feature to zoom all the elements on a page (back in the day, it just changed the text size) there is a glaring omission in Internet Explorer in that it doesn’t zoom the background image on a page. Not really a problem if you’re using a tiled / textured background, but if you’re using a full image that ties in with the rest of your layout it’s a disaster. It’s becoming more and more common to see site takeover ads that include a custom background that fits around the content of the site.
I’ve found a strange workaround for this that involves using CSS to assign your background image to the <html> tag as well as the <body> tag. You’ll need to keep the image on the <body> as otherwise Firefox and Safari will not render it all (it’s not in the standard!). It’s literally just a copy and paste from your body tag. For example:
html {
background-image: url('/images/large_background.jpg');
background-color: #000000;
background-position: top center;
background-repeat: none;
}
This would be a non-repeating image positioned at the top and middle of the page (suitable for use with a “margin: 0px auto” layout) with a black background colour (you’re fading the edges of your background images, right?).
It’s still not perfect, but it’s better than it is. Zooming in will now work perfectly across all browsers. Zooming out beyond the normal display with result in the background image being scaled with the content but will leave an echo of the background image assigned to the <body> tag to the right.