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.