I recently came across an interesting issue whilst using background-image:cover to fill and crop an image to a specific size within a div. This works well and looks great in most browsers, but in Chrome, on certain types of images, if you look really carefully you can see a slight blurring of some of the more detailed sections.

Take a look at the image below, these are screengrabs of the same image from two browsers.

The first is from Firefox, which looks good, but the one below from Chrome looks slightly blurry. It is especially obvious in the seeds on top of the bun.

Adding the webkit specific option

image-rendering:-webkit-optimize-contrast

removes this browser smoothing and returns the crispness to the image.

You might think that these differences are too small to matter, but when you’re working with beautiful high definition photography that really defines your brand then it’s important to be able to control exactly how they are displayed. As always, the devil is in the detail.