Flexible CSS-Hintergründe mit background-size gestalten

background-size-responsive-design

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.

kulturbanause-Seminare 2017

WordPress, HTML & CSS, Responsive Design, SVG, Prototyping, Muse …

Jetzt Frühbucher-Preise sichern!

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;
}

Die Angabe 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;
}

Die Angabe 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

Vordergrundbilder 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.