Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Using background-size to make crisp images for high resolution displays. Re: Using background-size to make crisp images for high resolution displays.

#108951
TheDoc
Member

I used it on a recent project to make sure my icons (that are in a sprite) came through nice and crisp. The biggest drawback, of course is that you’re serving up an image that is twice the size (though perhaps not double the actual KBs).

In your example you’re using an image that is 3x the size, adding even further to my point above. For the time being, you really only need to go 2x in size.

In your CSS you can make sure that you’re only serving these larger images to screens that support it by using this handy little media query:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {

/* Retina-specific stuff here */

}

https://css-tricks.com/snippets/css/retina-display-media-query/