President Obama Reelected

The image above is set with a background-position property set in percent. That number is equal to the point of focus in the image from the top left corner as a percentage of the whole image (the Obamas' heads in this case).

As you scale the window, the image moves to keep that point of focus centered relative to its original position.

This works great for sites with large hero images (such as Polygon) that need to fill the width of their container and still keep their subjects in focus when the window is smaller.

For the best effect either fade the image at the edges to a solid background color or select a background color that will mesh well with the image when the window is larger than the image.

This technique is supported down to IE6 and still works when combined with background-size (though background-size is not supported until IE9)

Discuss this technique on my blog

Julian Kussman