Bu aptalca bir soru gibi gelebilir.

Eğer düzenli görüntüler için bu CSS Pasajı box-bg.png 200px tarafından 200px olduğu) kullanırsam;

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

ve eğer böyle bir medya sorgu retina görüntüler hedef için kullanırsam @2x görüntü yüksek çözünürlüklü sürümü İle ();

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

    .box{background:url('images/box-bg@2x.png') no-repeat top left;}
}

400px yeni bir yüksek çözünürlüklü arka plan resmi maç için 400px .box sayı iki katına gerek var mı?

Hayır, ama background-size özelliği orijinal boyutlarına göre ayarlamak gerekir:

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

    .box{
        background:url('images/box-bg@2x.png') no-repeat top left;
        background-size: 200px 200px;
    }
}

EDİT

Bu cevap için biraz daha eklemek için burada retina tanıma sorgu kullanmak eğilimindedir:

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

}

- Source

NB. Bu 12 ** bir yazım hatası değildir. Firefox belirli sürümlerinde iyi belgelenmiş bir hata olduğunu ve eski sürümleri (Firefox 16 önce) desteklemek için bu gibi yazılmalıdır. - Source

@Açıklamalarda aşağıda belirtilen LiamNewmarch olarak, background-size kestirme background bildiriminde gibi içerebilir:

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

Ancak, ben şahsen iOS < desteklenmiyor steno formu kullanarak önermem;= 6 veya Android çoğu durumlarda güvenilmez hale.