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

[Tabellenkalk]

Hallo,

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

@media screen and (max-width: 350px) { .social_sign{ ... }

}

weil facebook nicht zeichensetzend ist!

Gruß
Kalk

[beli3ver]

<a href="signLink"><span class="social social_sign">&nbsp;</span></a>

Sorry mein Fehler falschen Link kopiert. Hier der richtige :-)

[MudGuard]

Hi,

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

background ist eine Zusammenfassung, die m.W. auch background-size enthält.

Damit würde die zwei Zeilen vorher gesetzte background-size durch background wieder auf den initial-value gesetzt.

Also entweder die background-size mit in background setzen oder aber NACH background.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

background ist eine Zusammenfassung, die m.W. auch background-size enthält.

D.W. isse korrekte.

LLAP 🖖

[beli3ver1]

Wenn ich das so mache, wird allerdings das ganze Sprite in der Größe angepasst, und nicht nur das Icon was ich davon brauche. Ich nehme an, um das machen zu können, muss ich dann, die Icons einzeln haben oder?

[Der Martin]

Hi,

Wenn ich das so mache, wird allerdings das ganze Sprite in der Größe angepasst, und nicht nur das Icon was ich davon brauche.
Ich nehme an, um das machen zu können, muss ich dann, die Icons einzeln haben oder?

nein, du musst nur background-position entsprechend dem Skalierungsfaktor anpassen. Bedenke, dass das gesamte Bild skaliert und dann erst positioniert wird.

So long,
 Martin