css - Retina Display background-size: cover -
if i'm using background-size: cover , want make sure image looks on retina macbook pro has resolution of 2880x1880, need make image resolution, or need double resolution because it's retina (as in when have image in site @ 800px x 400px displayed @ 400px x 200px ensure looks on retina).
.bg { color:#ccc; background-attachment:fixed; background-repeat: no-repeat; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; margin: 0; padding: 0; }
thanks - appreciated.
make images approximately resolution of device. want adjust bit browser/webclip chrome final image size bit different.
see custom icon , image creation guidelines more information.
additional background
retina display devices have devicepixelration of 2 - ration of physical pixels device independent pixels. quirks mode:
dips abstract pixels used feed information width/height media queries , meta viewport device-width. best explained taking @ difference between retina , non-retina devices.
taking ipad example, if set viewport device-width end (safari uses dips - see quirksmode):
dips physical -------- --------- non-retina: 768x1024 768x1024 retina: 768x1024 1536x2048
you layout markup based on dips use images based on physical pixels (x2 in case of retinal displays).
another way @ is: since rule of thumb retina 2x size of non-retina image, use 2x (768x1024)
retina or: 1536x2048
also, beware of real-estate taken browser chrome. example, status bar takes 20px overall screen.
Comments
Post a Comment