CSSスプライトのロールオーバーをRetina対応するには？

タイトル画像で、スマホ向け表示に苦戦しています。
クリック時に効果が見れるよう、CSSスプライトを使っています。
しかし、この方法を使用するとRetina対応が上手くいきません。
どうすれば良いでしょうか？

ちなみに試したCSSはこちらです。
.sprites {
background: url(/images/logo.png) no-repeat 0 top;
width: 104px;
height: 36px;
display: block;
margin-top: 10%;
text-indent: -9999px;
}
@media only screen and(-webkit-min-device-pixel-ratio: 1.5) {
.sprites {
background-image: url(/images/logo@2x.png) no-repeat 0 top;
background-size: 104px 72px;/* 画像自体の縦横半分のサイズ */
}
}
.sprites:hover {
background: url(/images/logo.png) no-repeat 0 bottom;
}
@media only screen and(-webkit-min-device-pixel-ratio: 1.5) {
.sprites:hover {
background-image: url(/images/logo@2x.png) no-repeat 0 bottom;
background-size: 104px 72px;/* 画像自体の縦横半分のサイズ */
}
}