Trouble with Retina & CSS background image

Question

Я разрабатываю сайт, который владелец хочет получить до запуска.

Владелец находится на OSX, и я нахожусь в Windows.

В Windows, сайт выглядит хорошо, как это:

Обратите внимание на синий баннер с животными - животные представлены в полном объеме, и этот баннер производится CSS:

.ribbon-container { 
    height: 78px; 
    background: url(images/mesopotamia_shadow.jpg) center bottom repeat-x; 
} 

Из другого Q & A, я нашел некоторый CSS, чтобы потенциально решить проблему, которую владелец имел на OSX. На ее компьютере синий баннер не отображается должным образом. Это выглядит примерно так:

Это производится с помощью CSS:

@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) { 
    .ribbon-container { 
     height: 78px; 
     background-size: 552px 78px; 
     background: url('images/mesopotamia_shadow-x2.jpg') center bottom repeat-x; 
    } 
} 

Примечания отображаемой картинки больше, чем на Windows. images/mesopotamia_shadow-x2.jpg (1104 x 156) click here for the image удваивает высоту и ширину images/mesopotamia_shadow.jpg (552 x 78) click here for the image. Это правильно или нет?

Правильно ли CSS?

Answer 1

Вы также можете попробовать:

.ribbon-container { 
    height: 78px; 
    background: url(images/mesopotamia_shadow.jpg) center bottom repeat-x; 
    background-size:contain; 
} 

который должен сделать подгонку изображения в пределах его контейнера.

Answer 2

Ваш вопрос немного расплывчатый, но я предполагаю, что вы спрашиваете, как сделать фоновое изображение заполнить div, а не отключиться. Вы можете сделать это, изменив фоновый размер как background-size:auto 100%;:

div{ 
 
    height:200px; 
 
    background:url(http://i112.photobucket.com/albums/n180/SRD001/screenshots/mesopotamia_shadow.jpg); 
 
    background-size:auto 100%; 
 
    resize:both; 
 
    overflow:hidden; 
 
}

<div></div>

Codepen
Или в вашем коде:

.ribbon-container { 
    height: 78px; 
    background: url(images/mesopotamia_shadow.jpg) center bottom repeat-x; 
    background-size:auto 100%; 
} 

В вышеприведенном демо это изображение заполняет столько максимально возможное пространство, не требуется @media.