Die CSS3 im Detail-Reihe geht in die dritte Runde!
Im dritten Teil werden wir eine weitere Möglichkeit unter die Lupe nehmen, die es uns erlaubt
background
noch weiter zu manipulieren. Dabei soll es uns um das Ändern der Größe des Hintergrundes gehen. Kurz gesagt, wir reden über background-size
.
Browserunterstützung
Folgende Browser unterstützen diese Technik bereits:
Syntax
Background-Size wird zwar von vielen Browsern unterstützt, allerdings hat jedes Programm noch seine eigene Implementierung mit eigener Syntax. Alle folgenden Anweisungen sind nötig, um background-size
auf allen Browsern, sofern diese die Technik auch unterstützen, zum Laufen zu bringen.
1 2 3 4 5 | div.bg_size { -moz-background-size:50% 25%; /* Firefox */ -webkit-background-size:50% 25%; /* Safari, Chrome */ background-size:50% 25%; /* Opera, IE, W3C Standard */ } |
Die beiden Werte sind entweder Prozentangaben (prozentuale Breite und Höhe des Elements mit dem Hintergrund) oder Längenangaben in px, em oder sonstwas, dann gibt man direkt die Breite und Höhe des Hintergrundbildes an.
background-size:50% 25%
background-size:100px 10em
Neben diesen Möglichkeiten können wir aber auch noch zwischen den Schlüsselwerten contain
und cover
wählen. Contain skaliert das Bild so groß wie möglich aber noch so klein, dass es vollständig in das Element passt. Cover hingegen skaliert das Bild so klein es geht aber füllt das Element vollständig aus.
Die nachfolgenden Anweisungen funktionieren nicht in Safari. Dieser nutzt noch eine alte Implementierung, die kein cover oder contain beinhaltet.
Update: Seit Version 5 (08.06.2010) besteht das Problem in Safari nicht mehr.
background-size:contain
background-size:cover
Fazit
An sich ist das eine schöne Sache aber die Implementierung ist noch nicht in allen modernen Browsern gleich.. von daher seh ich noch keinen wahnsinnig großen Vorteil. Es macht sicherlich Sinn, wenn man Vektorgrafiken als Hintergrundbilder benutzt, dann kann man diese wunderbar verlustlos skalieren. Für cover
oder contain
gibt es sicherlich mehr Anwendungsfälle, z.B. gibt es Seiten, die derzeit recht aufwändig versuchen ihr Hintergrundbild immer auf 100% Fensterbreite zu ziehen. Mit background-size:cover
ist das jetzt kein Problem mehr.
Einmal müssen wir noch über Backgrounds reden, das nächste Mal geht’s nämlich um Background-Gradients, danach geht es dann mit Bordern weiter.
8 Kommentare RSS
Zu ergänzen wäre noch, dass es an Stelle einer festen oder %-Größe noch auto gibt. Mit 100% auto bzw. auto 100% erreicht man dann das gleiche wie bei cover und contain.
Oh danke für die Ergänzung, hab ich noch gar nicht gewusst – cool.
Hallo Norman,
bei mir läuft das iergendwie nicht. Im Firefox bleibt mein Hintergrund gleich groß. Ich habe folgendes style :
body { background-image: url(background.jpg); background-size:100%; background-repeat:no-repeat; width: 100%; }
Auch wenn ich anstatt 100% contain oder cover eingäbe. Ich habe ein relativ großes Hintergrund (1280×960 px) und ein einziges Container für die Webseite. Wie kann das background die ganze Seite erfüllen, bei die unterschiedlichste Browsern? Danke für deine Hilfe im voraus
Hi Lastactionseo,
vermutlich hast du vergessen, dass du 3 Anweisungen brauchst, damit die Sache in möglichst vielen Browsern funktioniert.
-moz-background-size
für Firefox,-webkit-background-size
für Chrome und Safari und schließlichbackground-size
für Opera und IE9. Wenn du nurbackground-size
benutzt, funktioniert es im Firefox nicht.Hoffe, ich konnte dir weiterhelfen.
[...] peinliche Bildbegrenzung sichtbar wird, sind diese Bilder recht groß und die CSS3-Eigenschaft background-size wird eingesetzt. Wir haben Dimensionen von 1900 x 1050 Pixeln. Diese Bilder könnten als [...]
@Paul Bei Mischangaben aus
auto
und%
macht FireFox nicht mit. Siehe Mozilla Spezifikationen.Nachtrag: https://developer.mozilla.org/en/CSS/background-size
2domination…
…