CSS Sprite Background Size

[beli3ver]

Servus,

habe folgendes Problem. Ich habe ein einen Link, in diesem befinden sich ein Span dem ein Hintergrundbild über CSS zugewiesen wird vom Sprite. Dieser Sprite einhält alle Social Media Icons.

<a href="FBLink"><span class="social social_facebook">&nbsp;</span></a>

Der Passende CSS Code:

.social {
        text-align: center;
        height: 52px;
        padding: 6px 2px;
        display: inline-block;
        margin: auto;
}

@media screen and (max-width: 350px) {
        .social_sign{
               background-size:70% 70%;
               width: 62px;
               background: url(/img/m/social_media.png) 0 0;
        }

}

@media screen and (min-width: 351px) {
.social_sign {
        width: 62px;
        background: url(/img/m/social_media.png) 0 0;
}}

Wie ihr seht wollte ich per CSS festlegen, dass bei verschiedenen Auflösungen, die Icons ein weniger kleiner sind. Doch leider setzt er dieses nicht um. Meine Frage ist jetzt, warum?

Danke