2013-02-11 4 views
0

Я проектирую сайт с изображениями для сетчатки. Он отлично работает с сафари на macbook pro и iphone. Но с Chrome версии 24.0 на macbook pro с Mountain Lion я вижу только 1/4 изображения сетчатки.дизайн сетчатки с css для google chrome

У меня есть логотип с размером 300px х 83px и сетчатки у меня есть сетчатка логотип с размером 600px х 166px

Мой код (с DOCTYPE HTML первый):

<html> 
<head> 
<title></title> 
<style> 
.headerlogo {width:300px;height:83px;background: url(logo300.png); 
background-size: 300px 83px;padding:0px;margin:0px} 


@media (-webkit-min-device-pixel-ratio: 1.5), 
(-o-min-device-pixel-ratio: 3/2), 
(min--moz-device-pixel-ratio: 1.5), 
(min-device-pixel-ratio: 1.5), 
(min-resolution: 1.5dppx) { 

.headerlogo  {;background: url(logo600.png);} 
} 

</style> 
</head> 
<body> 
<div class="headerlogo"></div> 
</body> 
</html> 
+0

Пробовал «размер фона: 100%;» ? –

ответ

0

У вас есть изгоев точкой с запятой:

.headerlogo  {;background: url(logo600.png);} 

Должно быть:

.headerlogo  {background: url(logo600.png);} 

Возможно, вам придется снова указать свойство фона для изображения сетчатки при большем размере.

Попробуйте добавить "только экран" и посмотреть, если это помогает вопросы:

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), 
    only screen and (-moz-min-device-pixel-ratio: 1.5), 
    only screen and (-o-min-device-pixel-ratio: 3/2), 
    only screen and (min-device-pixel-ratio: 1.5), 
    only screen and (min-resolution: 1.5dppx) { 

     .headerlogo { 
      background: url(logo600.png); 
     } 

} 
+0

Я пробовал ваш код, но все та же проблема. – Paul

+0

Можете ли вы предоставить ссылку на свою страницу или создать jsfiddle, реплицируя проблему? –

0

Try "фон-размер: 100%;" Я не уверен, поэтому я ставлю его комментарием, но я думаю, что вы его не видели.

+0

Спасибо, за попытку. Но это не помогло. – Paul

Смежные вопросы