Pantallas Retina, imágenes de fondo de alta resolución

Esto puede sonar como una pregunta tonta.

Si uso este fragmento CSS para pantallas normales (Donde box-bg.png es 200px por 200px); 

.box{
    background:url('images/box-bg.png') no-repeat top left;
    width:200px;
    height:200px
}

Y si utilizo una consulta de medios como esta para apuntar a pantallas retina (Con la imagen @2x siendo la versión de alta resolución); 

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{background:url('images/[email protected]') no-repeat top left;}
}

¿Necesito duplicar el tamaño del div .box a 400px por 400px para que coincida con la nueva imagen de fondo de alta resolución?

Author: Adrift, 2013-04-22
Source

3 answers

No, pero necesita establecer la propiedad background-size para que coincida con las dimensiones originales: 

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{
        background:url('images/[email protected]') no-repeat top left;
        background-size: 200px 200px;
    }
}

EDITAR

Para agregar un poco más a esta respuesta, aquí está la consulta de detección de retina que tiendo a usar: 

@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) { 

}

- Fuente

NB. Esto min--moz-device-pixel-ratio: no es un error tipográfico. Es un error bien documentado en ciertas versiones de Firefox y debe escribirse así para soportar versiones anteriores (anteriores a Firefox 16). - Fuente

As @ LiamNewmarch mencionado en los comentarios a continuación, puede incluir el background-size en su declaración abreviada background así: 

.box{
    background:url('images/[email protected]') no-repeat top left / 200px 200px;
}

Sin embargo, yo personalmente no aconsejaría el uso de la forma abreviada, ya que no es compatible con iOS

 167
Author: Turnip,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-15 12:05:19

Aquí hay una solución que también incluye alta (er)DPI (MDPI) dispositivos > ~160 puntos por pulgada como bastantes dispositivos no iOS (por ejemplo: Google Nexus 7 2012):

.box {
    background: url( 'img/box-bg.png' ) no-repeat top left;
    width: 200px;
    height: 200px;
}
@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
       only screen and (    min--moz-device-pixel-ratio: 1.3 ),
       only screen and (      -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
       only screen and (         min-device-pixel-ratio: 1.3 ),
       only screen and ( min-resolution: 124.8dpi ),
       only screen and ( min-resolution: 1.3dppx ) {

       .box {
           background: url( 'img/[email protected]' ) no-repeat top left / 200px 200px;
       }

}

Como @3rror404 incluido en su edición después de recibir comentarios de los comentarios, hay un mundo más allá de Webkit/iPhone. Una cosa que me molesta con la mayoría de las soluciones alrededor hasta ahora como la referenciada como fuente arriba en CSS-Tricks , es que esto no se toma completamente en cuenta.
La fuente original ya fue más allá.

Como ejemplo, la pantalla Nexus 7 (2012) es una pantalla TVDPI con un device-pixel-ratio de 1.325. Al cargar las imágenes con resolución normal, se escalan mediante interpolación y, por lo tanto, son borrosas. Para mí, la aplicación de esta regla en la consulta de medios para incluir esos dispositivos tuvo éxito en los mejores comentarios de los clientes.

 12
Author: Volker E.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-18 19:18:24

Si está planeando usar la misma imagen para la pantalla retina y no retina, aquí está la solución. Digamos que tiene una imagen de 200x200 y tiene dos iconos en la fila superior y dos iconos en la fila inferior. Son cuatro cuadrantes.

.sprite-of-icons {
  background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat;
  background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */
}

.sp-logo-1 { background-position: 0 0; }

/* Reduce positioning of the icons down to 50% rather using -50px */
.sp-logo-2 { background-position: -25px 0; }
.sp-logo-3 { background-position: 0 -25px; }
.sp-logo-3 { background-position: -25px -25px; }

Escalado y posicionamiento de los iconos del sprite al 50% del valor real, puede obtener el resultado esperado.

 1
Author: Syed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-22 13:16:52