Allgemein
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.
-moz-background-size:50% 30%; /* Firefox */
-webkit-background-size:50% 30%; /* Safari, Chrome */
background-size:50% 30%; /* Opera, IE*/Hintergrundbilder lassen sich mit vier Schreibweisen einsetzen: mit Schlüsselwörtern, mit einem Wert, mit zwei Werten und mit der Syntax für mehrere Hintergrundbilder.
.schieberegler {
background-image: url(x_test_x.jpg);
background-size: cover;
}Bei mehr als einem Hintergrundbild sitzen die Größenangaben in einer Komma getrennten Liste.
background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;Browser-Support: Alle modernen Browser (IE ab Version 10).
SVG-Grafik ist besonders gut geeignet als Hintergrundbild, da sich SVG an die Größe anpassen lässt. Ihr müsst ein wenig damit probieren bis ihr das richtige Layout gefunden habt. Viel Erfolg.
