Serving retina specific images in CSS are not working

Would really appreciate some help here. I have some social icons on my website, but on retina screens they don't look so good. So i have used media queries to serve 2x version of these images, for retina devices. Unfortunately they don't work, and blows the image up and cuts half of it off.

See this link Verdacci.com

The images are in sprites, for the retina version i made a new sprite and allocated the co-ordinates for the css to pick off the icons. The co-ordinates seem ok, but it blows them up to 50px and as the container is 25px, it seems cut off. This is the CSS i have used for normal version and for retina.

ul.social-links a.facebook {
display: block;
background: url("images/s-icons.png") no-repeat scroll 0 -6px;
height: 25px;
width: 25px;
transition: background 300ms ease-in-out 0s;
}

ul.social-links a.facebook:hover {
display: block;
background: url("images/s-icons.png") no-repeat scroll 0 -40px;
height: 25px;
width: 25px;
}

And for retina media

/* CSS for high-resolution devices */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
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) {

/* Social Media Styles */


ul.social-links a.facebook {
display: block;
background: url("images/s-icons2x.png") no-repeat scroll 0 -12px;
height: 25px;
width: 25px;
transition: background 300ms ease-in-out 0s;
}

ul.social-links a.facebook:hover {
display: block;
background: url("images/s-icons2x.png") no-repeat scroll 0 -71px;
height: 25px;
width: 25px;
}

Solution

There are a couple issues here:

The sprite image you have @2x is not actually twice the size. It should be 50px X 1138px. You also need to set the background-size in your retina CSS to the size of the non-retina image. Also there is no need to set the height, width, background-position or any other CSS that is stated in the non-retina CSS.

Example:

    ul.social-links a.facebook {
        background: url("images/s-icons2x.png") no-repeat;
        -webkit-background-size: 25px 569px;        
        background-size: 25px 569px;
    }