Retina displays High Resolution Background Image

Showing high resolution background image is quite easy. All you have to do give background size. First we have to position our background image for normal image. Suppose our normal image’s width and height is 250px and 123px respectively. Then in @media block we set the background size for high resolution image.

.logo{
	background: transparent url("./img/mobile_header_footer_sprite.png") 0px -100px no-repeat;
	width: 129px;
	height: 36px;
	text-decoration: none;
	@media (-webkit-min-device-pixel-ratio: 2), 
	(min-resolution: 192dpi) {
	  background: transparent url("./img/mobile_header_footer_sprite@2x.png") no-repeat 0px -100px;
	  background-size: 250px 123px;
	}
}

About Zakir Hyder

This entry was written by .

14. October 2013 by Zakir Hyder
Categories: CSS, HTML | Tags: , , , , , , | Comments

Comments

  1. […] If you are wondering about “@media (-webkit-min-device-pixel-ratio: 2)” see this Retina displays High Resolution Background Image. […]