Retina CSS Examples

retina.css

#stripe{
    height:5px;
    background:url('/static/img/stripe.gif') repeat-y center top;
    -webkit-background-size:1000px 1px;
    -moz-background-size:1000px 1px;
    background-size:1000px 1px;
}

@media screen and (-webkit-device-pixel-ratio:2.0){
    #stripe{
        background-image:url('../img/stripe@2x.gif');
    }
    
    .no-svg #workflow-animation, .no-js #workflow-animation{
        background:transparent url("../img/workflow-animation@2x.jpg") no-repeat left top;
    }
}

@media screen and (-moz-device-pixel-ratio:2.0){
    #stripe{
        background-image:url('../img/stripe@2x.gif');
    }
    
    .no-svg #workflow-animation, .no-js #workflow-animation{
        background:transparent url("../img/workflow-animation@2x.jpg") no-repeat left top;
    }
}

@media screen and (device-pixel-ratio:2.0){
    #stripe{
        background-image:url('../img/stripe@2x.gif');
    }
    
    .no-svg #workflow-animation, .no-js #workflow-animation{
        background:transparent url("../img/workflow-animation@2x.jpg") no-repeat left top;
    }
}