A veces, por comodidad, usamos imágenes de fondo con la propiedad background en CSS pero un día entras a una web hecha por ti desde un iphone, ipad o trasto que con pantalla retina display y te encuentras con una imagen absurdamente pequeña o distorsionada…
La manera de arreglarlo es con la propiedad background-size de CSS3 y un par de condicionales que afecten sólo a los dispositivos con retina:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.menu { background-size: 127px 55px; background: url(images/menu@2x.jpg) no-repeat center center;}
}
Normalmente se crea una imagen al doble de tamaño de la original (menu@2x.jpg) y se establece en la propiedad background-size el tamaño exacto de esa imagen (ancho alto).
Más info al respecto: