kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets 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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

21 Kommentare

  1. Sebastian

    Verfasst am 17. April 2013 um 19:31 Uhr.

    Tolles Video! Alles super erklärt!

  2. Marcos

    Verfasst am 20. April 2013 um 21:03 Uhr.

    Danke Jonas!

  3. Florian

    Verfasst am 21. April 2013 um 20:39 Uhr.

    Gut erklärt. Vielen Dank.

  4. hans

    Verfasst am 3. Mai 2013 um 11:58 Uhr.

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

    • Jonas Hellwig

      Verfasst am 3. Mai 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.

  5. Andrea

    Verfasst am 11. Mai 2013 um 11:29 Uhr.

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

  6. Tom

    Verfasst am 20. Mai 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

    • Jonas Hellwig

      Verfasst am 21. Mai 2013 um 23:24 Uhr.

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

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

      • Tom

        Verfasst am 24. Mai 2013 um 0: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

  7. Michael

    Verfasst am 3. Juni 2013 um 17:41 Uhr.

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

  8. Martina Keck

    Verfasst am 20. Juni 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.

    • Jonas Hellwig

      Verfasst am 21. Juni 2013 um 9: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.

      • Martina Keck

        Verfasst am 21. Juni 2013 um 13:49 Uhr.

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

  9. Johnsn

    Verfasst am 6. November 2013 um 14:13 Uhr.

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

    Neat! :)

  10. Wasi

    Verfasst am 21. November 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

  11. Manuel

    Verfasst am 13. Januar 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

    • Jonas Hellwig

      Verfasst am 13. Januar 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.

  12. Markus

    Verfasst am 19. Februar 2014 um 9:59 Uhr.

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

  13. Uwe

    Verfasst am 11. März 2017 um 13:28 Uhr.

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

  14. Martin

    Verfasst am 8. April 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!

    • Jonas Hellwig

      Verfasst am 9. April 2017 um 16:37 Uhr.

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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.