Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Flexible CSS-Hintergründe mit background-size gestalten

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.

YouTube

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

Video laden

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 kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 21 Kommentare

  1. Martin
    schrieb am 08.04.2017 um 10:19 Uhr:

    Hallo, bei der Erklärung fehlt mir noch ein Hinweis, wie ich mit background-size:cover; das Hintergrund zentriert halten kann. Wenn das Fenster kleiner wird, zeigt der Browser nur noch den linken Teil des Bildes, aber ich denke in 99,9% der Fälle will man doch lieber das beide Seiten gleich beschnitten werden.
    Danke für Tipps!

    Antworten
    • Jonas Hellwig
      schrieb am 09.04.2017 um 16:37 Uhr:

      Du solltest das Problem mit background-position: center; lösen können.

      Antworten
  2. Uwe
    schrieb am 11.03.2017 um 13:28 Uhr:

    Super erklärt! Vielen Dank für dieses Tutorial! :)

    Antworten
  3. Markus
    schrieb am 19.02.2014 um 09:59 Uhr:

    Danke für den Tipp! Gerade bei Hintergründen mit Verläufen funktioniert background-size:contain; sehr gut.

    Antworten
  4. Manuel
    schrieb am 13.01.2014 um 16:53 Uhr:

    Hallo, super Video, habe die cover version verwendet allerdings bleibt das Bild bei mir unverändert und wird nicht skaliert. mein quelltext ist so wie im video.
    lg

    Antworten
    • Jonas Hellwig
      schrieb am 13.01.2014 um 21:44 Uhr:

      Prüfe bitte mal ob das Bild a) in einem kompatiblem Browser geöffnet wird (IE8+) und b) als CSS-background eingebunden wurde.

      Antworten
  5. Wasi
    schrieb am 21.11.2013 um 11:45 Uhr:

    Hallo Jonas,
    danke für das Tutorial, ist echt klasse und super erklärt.
    Eine Sache vermisse ich nur: wie ist das mit der Bildauflösung,
    damit z.B. Hintergrundbilder nicht zu krisseig/pixelig werden?
    Würdest Du da empfehlen z.B. mit 2560 x 1600 Pixeln zu arbeiten?

    viele Grüße

    Antworten
  6. Johnsn
    schrieb am 06.11.2013 um 14:13 Uhr:

    Klasse Video, Danke!
    Subtiler Fund darin: http://lab.maltewassermann.com/viewport-resizer/

    Neat! :)

    Antworten
  7. Martina Keck
    schrieb am 20.06.2013 um 12:06 Uhr:

    Danke für den tollen Beitrag und das super Video-Training zum Thema responsives Design. Habe hier noch eine Frage zu background-size: 100% auto. Verwende dieses um mit:before einen dehnbares Hintergrundbild (png) über einen Container zu setzen und entsprechend zu verbreitern. Dies funktioniert soweit super aber ich muss ja eine Höhe und mit negativem top die Verschiebung bei before angeben. Diese hängen aber natürlich von jeweiligen dehnen / stauchen ab. Wie mache ich das? Stehe etwas auf dem Schlauch oder bin ich hier ganz auf dem Holzweg? Wäre super, wenn du mir hier einen Tipp /Link geben kannst. Vielen Danke schon mal vorab.

    Antworten
    • Jonas Hellwig
      schrieb am 21.06.2013 um 09:09 Uhr:

      Hallo Martina,

      vielen Dank zunächst für dein Lob zum Video-Training. Was dein Problem betrifft. Versuche mal dem Hauptelement position:relative; mitzugeben und anschließend das mit :before erzeugte Element mit position:absolute; top:0; left:0; width:100%; height:100%; zu positionieren.

      Antworten
      • Martina Keck
        schrieb am 21.06.2013 um 13:49 Uhr:

        Hallo Jonas,
        danke für die schnelle Antwort. Hat super funktioniert.
        vg

  8. Michael
    schrieb am 03.06.2013 um 17:41 Uhr:

    Danke für Dein Tutorial; wirklich sehr sehr hilfreich!

    Antworten
  9. Tom
    schrieb am 20.05.2013 um 15:47 Uhr:

    Hallo,

    warum funktioniert bei dir ein background-image im leeren DIV container? Bei mir wirds in allen Browsern nicht angezeigt, außer ich setze Inhalte wie  s rein.

    Viele Grüße

    Antworten
    • Jonas Hellwig
      schrieb am 21.05.2013 um 23:24 Uhr:

      Wenn du Höhe und Breite angegeben hast, sollte es funktionieren:

      div {
      height:100px;
      width:300px;
      background:red;
      }

      Antworten
      • Tom
        schrieb am 24.05.2013 um 00:31 Uhr:

        Danke, das habe ich probiert, hatte mich nur gewundert warum das bei dir funzt. K.A. obs mit festen Größen evt. Nachteile geben kann.

        vg

  10. Andrea
    schrieb am 11.05.2013 um 11:29 Uhr:

    Super erklärt und alles drin ;-) Ich denke da lohnt sich auch die DVD.

    Antworten
  11. hans
    schrieb am 03.05.2013 um 11:58 Uhr:

    gutes video, aber du arbeitest nicht wirklich mit dreamweaver oder? try > http://www.sublimetext.com/

    Antworten
    • Jonas Hellwig
      schrieb am 03.05.2013 um 12:29 Uhr:

      Danke :) Doch ich arbeite immer in Dreamweaver. Aber nur in der Codeansicht, den Rest nutze ich überhaupt nicht. Ich komme mit Dreamweaver super zurecht und will auch gar nicht wechseln. Sublime Text kenne ich, aber ich werde mich da in nächster Zeit nicht extra einarbeiten. Bis ich in Sublime meine Dw-Geschwindigkeit erreicht habe, dauert mir das zu lange. Und mit ein paar Plugins und ner dunklen Code-Ansicht finde ich Dreamweaver spitze.

      Antworten
  12. Florian
    schrieb am 21.04.2013 um 20:39 Uhr:

    Gut erklärt. Vielen Dank.

    Antworten
  13. Marcos
    schrieb am 20.04.2013 um 21:03 Uhr:

    Danke Jonas!

    Antworten
  14. Sebastian
    schrieb am 17.04.2013 um 19:31 Uhr:

    Tolles Video! Alles super erklärt!

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →