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

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

Function that returns a formatted array in VBA -