retina/high rest span image (css)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>responsive image : span images</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>

        .img{
            display: inline-block;
            vertical-align: baseline;
            overflow: hidden;
            background-size: 100% auto;
            background-position: 0 0;
            position: relative;
        }

        .img.site-logo-png{
            background-image: url('http://lorempixel.com/400/200/city/6/normal/');
            width: 400px;
            height: 200px;
        }


        /* Retina-specific stuff here - http://css-tricks.com/snippets/css/retina-display-media-query/  */


        @media
        only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (   min--moz-device-pixel-ratio: 2),
        only screen and (        moz-device-pixel-ratio: 2),
        only screen and (      -o-min-device-pixel-ratio: 2/1),
        only screen and (        min-device-pixel-ratio: 2),
        only screen and (              min-resolution: 192dpi),
        only screen and (                min-resolution: 2dppx) {

            .img.site-logo-png{
                background-image: url('http://lorempixel.com/800/400/city/6/HIGHRES/');
            }

        }


    </style>

</head>
<body>

    <p>
        <span class="img site-logo-png"></span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, sit, corrupti dicta quod quo atque alias natus a unde voluptatem architecto perspiciatis modi perferendis ex odio similique deleniti voluptatum. Itaque.
    </p>


</body></html>