Hintergrundgrößen und -positionen

Im vorherigen Kapitel hast du Hintergrundbilder eingebunden. Mit background-size steuerst du, wie groß das Bild dargestellt wird. Mit background-position legst du fest, an welcher Stelle es im Element sitzt.

background-size

Die Eigenschaft background-size bestimmt die Darstellungsgröße des Hintergrundbildes. Ohne Angabe bleibt das Bild in seiner Originalgröße (auto).

1background-size: Wert;

cover

cover skaliert das Bild so, dass es den gesamten Bereich ausfüllt. Das Seitenverhältnis bleibt erhalten. Überstehende Teile werden abgeschnitten.

Das ist die übliche Wahl für Banner, Hero-Bereiche und Karten, in denen keine Lücken entstehen sollen.

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: cover;
5    background-position: center;
6    height: 150px;
7}

contain

contain skaliert das Bild so, dass es vollständig sichtbar bleibt. Wenn das Seitenverhältnis von Bild und Element nicht übereinstimmt, bleiben Leerräume.

Nutze contain, wenn nichts vom Bild fehlen darf – zum Beispiel bei Logos oder Illustrationen.

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: contain;
5    background-position: center;
6    height: 150px;
7}

Der graue Bereich zeigt den Leerraum, der bei contain entstehen kann. Mit background-color kannst du diese Fläche bewusst einfärben.

cover und contain im Vergleich

Feste Größen

Statt cover oder contain kannst du eine konkrete Größe angeben. Ein einzelner Wert setzt die Breite. Die Höhe wird dann automatisch proportional berechnet (auto).

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: 120px auto;
5    background-position: top left;
6}

Prozentwerte beziehen sich auf die Größe des Elements, nicht auf die Originalgröße des Bildes. 50% bedeutet: Das Bild ist halb so breit wie die Box.

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: 50%;
5    background-position: center;
6}

Zwei Werte für Breite und Höhe

Mit zwei Werten setzt du Breite und Höhe getrennt: zuerst die Breite, dann die Höhe. Das Bild wird auf genau diese Maße gezogen – auch wenn sich das Seitenverhältnis ändert.

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: 200px 80px;
5    background-position: center;
6}

100% 100% füllt den Bereich ebenfalls aus, verzerrt das Bild aber, statt es zuzuschneiden. cover erhält das Seitenverhältnis, 100% 100% nicht.

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: 100% 100%;
5}

background-position

Mit background-position verschiebst du das Hintergrundbild innerhalb des Elements. Der Standard ist oben links (0% 0%).

1background-position: horizontal vertikal;

Die Position wirkt vor allem dann, wenn Bild und Element unterschiedlich groß sind:

• Bei cover entscheidet die Position, welcher Bildausschnitt sichtbar bleibt.
• Bei contain oder einer kleineren festen Größe entscheidet sie, wo das Bild in der freien Fläche sitzt.

Schlüsselwörter

Die einfachste Schreibweise nutzt Schlüsselwörter. Ein einzelner Wert wie center oder top zentriert die andere Achse automatisch.

• left, center, right – horizontale Position
• top, center, bottom – vertikale Position
• top right, bottom left – beide Achsen kombinieren

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: 80px auto;
5    background-position: center;
6}

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: 80px auto;
5    background-position: top right;
6}

Alle Schlüsselwörter im Überblick

Jedes Feld zeigt dasselbe kleine Bild an einer anderen Position:

Prozent- und Pixelwerte

Statt Schlüsselwörtern kannst du Prozent- oder Längenwerte verwenden. Der erste Wert ist die horizontale Position, der zweite die vertikale.

• 0% 0% entspricht top left
• 50% 50% entspricht center
• 100% 100% entspricht bottom right

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: 80px auto;
5    background-position: 80% 20%;
6}

Pixelwerte zählen vom oberen linken Rand des Elements. 24px 16px setzt das Bild 24 Pixel von links und 16 Pixel von oben.

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: 80px auto;
5    background-position: 24px 16px;
6}

Abstand von einem bestimmten Rand

Mit vier Werten startest du von einem bestimmten Rand und setzt dann den Abstand. Das ist praktisch, wenn ein Logo zum Beispiel 16 Pixel vom rechten und 12 Pixel vom unteren Rand sitzen soll.

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: 80px auto;
5    background-position: right 16px bottom 12px;
6}

Größe und Position kombinieren

In der Praxis verwendest du beide Eigenschaften zusammen. Für einen Hero-Bereich ist die Kombination cover und center der Standard: Das Bild füllt die Fläche, der Mittelpunkt bleibt sichtbar.

1.hero {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: cover;
5    background-position: center;
6    height: 180px;
7}

Ausschnitt bei cover steuern

Weil cover das Bild zuschneidet, bestimmt background-position, welcher Teil übrig bleibt. Beim Landschaftsbild zeigt top mehr Himmel, bottom mehr Wiese.

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: cover;
5    background-position: top;
6}

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: cover;
5    background-position: bottom;
6}

Kurzschreibweise

In der Kurzschreibweise background stehen Position und Größe hintereinander. Die Größe kommt nach einem Schrägstrich:

1.hero {
2    background: url("bild.jpeg") no-repeat center / cover;
3}

Das entspricht no-repeat, background-position: center und background-size: cover. Für den Einstieg sind die einzelnen Eigenschaften übersichtlicher. Die Kurzschreibweise eignet sich später für wiederkehrende Muster.