This article was written in 2009. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Centered images in the middle of a block without (total) loss of usability

The designer wants all images to be centered inside a square box with defined dimensions. The longest side of each image is the same length as this dimension but the smaller side is unknown and variable. Easy you say.

<div style="background:url(path/to/image-w100xh75.jpg) no-repeat 50% 50%;width:100px;height:100px;"></div>

Easy it is. Unless the usability expert comes knocking on your door. Background images don’t behave the same as normal images. In most browsers, for instance, you can’t easily download a background image by right clicking on it.

So you do want the background positioning but you also want some important behaviour of a normal image. Here it is: Centered images in the middle of a block with normal usability.

It does not work in fluid or flexible layouts of course. But it does work in all serious browsers and in IE7. Haven’t tested it in IE6 but there’s no reason it wouldn’t work there. I’m not sure if it creates a performance issue. The images are downloaded only one time, so that’s not an issue. The only problem might be double memory usage. I haven’t tested that.