How to use Background-Size

Einleitung

CSS background-size ist eine Eigenschaft, mit der man die Größe von Hintergrundbildern in einem HTML-Element definieren kann.

Die background-size Eigenschaft kann verwendet werden, um die Breite und Höhe des Hintergrundbildes anzupassen, um es entweder vollständig oder teilweise im Hintergrund des Elements anzuzeigen. Es gibt verschiedene Werte, die für die background-size Eigenschaft verwendet werden können:

1. auto – Der Standardwert. Das Hintergrundbild wird in seiner ursprünglichen Größe angezeigt.
2. cover – Das Hintergrundbild wird so skaliert, dass es den gesamten Hintergrund des Elements ausfüllt, wobei die Proportionen des Bildes beibehalten werden. Das Bild wird möglicherweise beschnitten, um den Hintergrund vollständig zu füllen.
3. contain – Ein Hintergrundbild wird so skaliert, dass es vollständig im Hintergrund des Elements angezeigt wird, wobei die Proportionen des Bildes beibehalten werden. Wenn das Bild kleiner als das Element ist, wird es nicht vergrößert, um das gesamte Element auszufüllen.
4. Prozentangaben – Man kann auch Prozentangaben für die background-size Eigenschaft verwenden, um das Verhältnis von Breite zu Höhe des Hintergrundbildes zu definieren. Zum Beispiel kann man background-size: 50% 50%; verwenden, um das Hintergrundbild auf 50% der Breite und 50% der Höhe des Elements zu skalieren.
5. Pixelangaben – Man kann auch Pixelangaben für die background-size Eigenschaft verwenden, um die genaue Breite und Höhe des Hintergrundbildes zu definieren.
6. Weitere spezifische Werte wie “contain-float”, “cover-float” und “auto-fit” für besondere Anforderungen.

Zusätzlich zur background-size Eigenschaft gibt es noch weitere Eigenschaften, die mit Hintergrundbildern in CSS verwendet werden können, wie background-image, background-position und background-repeat. Zusammen können diese Eigenschaften dazu beitragen, den Hintergrund eines HTML-Elements genau nach den Anforderungen zu gestalten.

Unterstützung

Die EIgenschaft 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.

1. Beispiel: background-size: 200px;
2. Beispiel: background-size: 200px 100px;
3. Beispiel: background-size: 200px 100px, 400px 200px; 
4. Beispiel: background-size: auto 200px;
5. Beispiel: background-size: 50% 25%;
6. Beispiel: background-size: contain;
7. Beispiel: 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.