Flexible CSS-Hintergründe mit background-size gestalten

Von: Jonas

Grafiken, die einem Element als Hintergrund zugewiesen wurden, können mit der CSS-Eigenschaft background-size verzerrt, skaliert oder beschnitten werden.

Aktualisiert von 2013 – 2023 21 Kommentare

Mit der CSS-Eigenschaft background-size lassen sich CSS-Hintergrund-Grafiken skalieren und transformieren. Besonders im Responsive Webdesign kann diese Eigenschaft von großem Vorteil sein. In diesem Beitrag zeigen wir euch mit Hilfe von Code-Beispielen und einem Video welche Möglichkeiten ihr habt.

Die CSS-Eigenschaft background-size

Zum Skalieren und Transformieren von CSS-Hintergrund-Grafiken wird die CSS-Eigenschaft background-size verwendet. Es existieren verschiedene Werte um verschiedene Ergebnisse zu erzielen. In den folgenden Beispielen zeigen wir euch, welche Angabe zu welchem Effekt führt. Wenn man keine Angabe macht, wird die Hintergrund-Grafik in ihrer vollen Größe in den Hintergrund geladen. Wenn das Element in Höhe oder Breite kleiner ist, als die Hintergrund-Grafik, wird die Grafik automatisch beschnitten. Falls ihr zusätzlich Informationen zur Positionierung von Hintergrund-Grafiken benötigt, empfehlen wir euch folgenden Artikel.

Die Angabe mit Prozent-Werten

Gibt man die Größe der Hintergrund-Grafik mit Prozent-Werten an, richtet sich die Grafik prozentual nach der Höhe und der Breite des Elements. Hierbei bestimmt die erste Angabe die Breite und die zweite Angabe die Höhe der Grafik. Die Grafik wird somit nie angeschnitten, jedoch verzerrt sie sich, je nach Größe des Elements.

div {
  background-size: 100% 100%;
}

Anstelle einer prozentualen Angabe kann man auch auto schreiben. Hierbei wird die Grafik nicht mehr verzerrt, jedoch werden eventuell Teile der Grafik beschnitten oder es entstehen Freiräume, die nicht von der Hintergrund-Grafik bedeckt werden. Im folgenden Code-Beispiel ist die Grafik immer genau so breit wie der <div>-Container und die Höhe passt sich proportional der Bildbreite an.

div {
  background-size: 100% auto;
}

Der Wert contain

Beim Wert contain wird die Hintergrund-Grafik nie verzerrt und auch nie angeschnitten. Die Grafik wird immer im gleichen Seitenverhältnis größer oder kleiner skaliert, aber immer so, dass die komplette Grafik angezeigt wird. Dadurch können Freiräume im Container-Element entstehen, die nicht von der Hintergrund-Grafik abgedeckt sind.

div {
  background-size: contain;
}

Der Wert cover

Mit Hilfe des cover-Werts wird immer das gesamte Container-Element mit der Hintergrund-Grafik ausgefüllt, ohne dass die Grafik verzerrt wird. Die Grafik wird teilweise angeschnitten und auf die passende Größe skaliert, wenn das Seitenverhältnis der Grafik von dem des Container-Elements abweicht.

div {
  background-size: cover;
}

Die Angabe mit festen Werten

Gibt man feste Werte z. B. in px oder em an, wird die Hintergrund-Grafik genau auf diese Größe skaliert. Je nachdem, ob das Seitenverhältnis verändert wird, kann die Grafik somit auch verzerrt werden. Ebenso wie bei der Angabe mit Prozent-Werten gilt die erste Angabe für die Breite und die zweite Angabe für die Höhe der Grafik. Auch diese Werte können mit der auto-Angabe kombiniert werden.

div {
  background-size: 100px 80px;
}

Ein Funktionsbeispiel aller oben beschriebenen Angaben findet ihr untenstehend. Des Weiteren findet ihr dort einen Videoauszug aus dem Video-Training »Responsive Webdesign«, der dieses Thema ebenfalls behandelt.

Beispiele anschauen

Video: CSS background-size

Die zuvor beschriebenen Eigenschaften haben wir auch in einem Video zusammengefasst.

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Vordergrundbilder <img> skalieren

Auch für Vordergrundbilder, die mittels <img>-Tag im HTML-Code eingebunden werden, existiert eine vergleichbare CSS-Eigenschaft namens object-fit. Einen Beitrag zu diesem Thema findet ihr hier.

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing