Retina Display background-size: cover

Question

If I'm using background-size: cover and I want to make sure my image looks good on a retina macbook pro which has a resolution of 2880x1880, do I just need to make the image that resolution, or does it need to be double that resolution to look good because it's retina (as in when you have an image in the site at say 800px x 400px but displayed at 400px x 200px to ensure that it looks good 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 - greatly appreciated.

Answer 1

Make the images approximately the resolution of the device. You will likely want to adjust a bit for browser/webclip chrome so the final image size will be a bit different.

See Custom Icon and Image Creation Guidelines for more information.

Additional Background

Retina display devices have a devicePixelRation of 2 - which is the ration of physical pixels to device independent pixels. From quirks mode:

Dips are the abstract pixels that are used to feed information to the width/height media queries and the meta viewport device-width. They are best explained by taking a look at the difference between retina and non-retina devices.

Taking the iPad as an example, if you were to set the viewport to device-width you would end up with (Safari always uses DIPS - see quirksmode):

               DIPS        Physical
               --------   ---------
non-retina:    768x1024    768x1024
    retina:    768x1024   1536x2048

You layout your markup based on DIPS but use images based on the physical pixels (x2 in the case of retinal displays).

Another way to look at this is: since the rule of thumb for retina is 2x the size of an non-retina image, use 2x (768x1024) for retina or: 1536x2048

Also, beware of the real-estate taken up by browser chrome. For example, the status bar takes up 20px from the overall screen.