retina design with css for google chrome -
i designing website images retina. works safari on macbook pro , iphone. chrome version 24.0 on macbook pro mount lion see 1/4 of retina image.
i have logo size 300px x 83px , retina have retina logo size 600px x 166px
my code (with doctype html first):
<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>
you have rogue semicolon:
.headerlogo {;background: url(logo600.png);} should be:
.headerlogo {background: url(logo600.png);} you may have specify background-size property 1 time again retina image @ larger size.
try adding "only screen" , see if helps matters:
@media screen , (-webkit-min-device-pixel-ratio: 1.5), screen , (-moz-min-device-pixel-ratio: 1.5), screen , (-o-min-device-pixel-ratio: 3/2), screen , (min-device-pixel-ratio: 1.5), screen , (min-resolution: 1.5dppx) { .headerlogo { background: url(logo600.png); } } css google-chrome
No comments:
Post a Comment