CSS retina and non retina media queries

Question

I am trying to set up a background image for my website according to different resolutions. I also want to include the retina media queries so that if a retina device accesses my site the proper image will be loaded. The thing is that I always get the highest resolution which is not retina of course... Here is my css

 <style>


#background
{
    font-size: large;
    position: relative;
    top:50%;
    left:50%;
    color: white;

}

  @media only screen and (min-device-width : 768px) and (max-device-width:1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 2) 
{
    #demo{
    width: 100%;

    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url([email protected]);
    background-color: rgb(0,0,0);
    }
}

@media screen and (min-width:1025px)
{
    #demo{
    width: 100%;

    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url(demo_BG_1024.png);
    background-color: rgb(0,0,0);
    }
}

@media screen and (max-width:1024px)
{
    #demo{
    width: 100%;

    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url(demo_BG_1024.png);
    background-color: rgb(0,0,0);
    }
}

@media screen and (max-width:720px)
{
    #demo{
    width: 100%;

    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url(demo_BG_720.png);
    background-color: rgb(0,0,0);
    }
}

@media screen and (max-width:320px)
{
        #demo{
        width: 100%;

        height: 100%;
        background-size: 100%;
        background-repeat: no-repeat;
        position:absolute;
        background-image: url(demo_BG_320.png);
        background-color: rgb(0,0,0);
    } 
}
</style>

Answer 1

You have to use -webkit-min-device-pixel-ratio:1 for non-retina.

NON-Retina.

 @media only screen and (min-device-width : 768px) and (max-device-width:1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 1) 
{
    #demo{
    width: 100%;
    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url([email protected]);
    background-color: rgb(0,0,0);
    }
}

Retina

 @media only screen and (min-device-width : 768px) and (max-device-width:1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 2) 
{
    #demo{
    width: 100%;
    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url([email protected]);
    background-color: rgb(0,0,0);
    }
}

Answer 2

I don't use media queries, I use retina.js. All you need to do is include the retina.js file and host two versions of the image - image.png and [email protected] (for example).

The JavaScript will then check every image on the page and automatically display the high resolution image (@2x - Apple's pre-defined identifier) on retina displays if it is available, or display the normal image if not. Non-retina displays will be served the non @2x version.

More information here: http://imulus.github.io/retinajs/

Answer 3

To add on to @BaTmaN 's answer, it most likely didn't work in Firefox bc/ the example code is using webkit prefixes. For other browsers you would need to use the proper browser prefixes: eg.

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)