Crisp background images on iPhone 4

This is very niche but if you’re bothered by pixellated CSS background images on the Retina display, here is a little tip to make them crisp and gorgeous.

You will need:

1 x CSS media query that targets iPhone 4 only
1 x double size background image

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#targetelement {
background-image: url(doublesize.jpg); /* image is 200x200 */
-webkit-background-size: 100px 100px; /* display at 100x100 */
}
}

The media query targets iPhone 4 only at the moment, but be aware that if other devices with the same device-pixel-ratio become available (and use WebKit) then this media query will affect them too.