Buch & Berger

  • Angebot
  • Agentur
  • Blog
  • Kontakt
  • Search

Cross-Browser-Lösung für Full Width Background Image mit CSS

Für ein Full Width Background Image, also ein fix positioniertes, sein Container-Element vollständig ausfüllendes Hintergrundbild gibt es eigentlich schon seit längerer Zeit eine perfekte Lösung: die Kombination aus background-attachment: fixed und background-size: cover.

Leider funktioniert das auf iOS (iPhones und iPads) nicht wie geplant, und auch einzelne Android-Browser haben damit ein Problem. Aufgefallen ist es mir zuletzt beim offenbar immer noch sehr verbreiteten Dolphin (Stand: 2015-09-07).

Javascript kann hier die Lösung sein (z.B. mit einem Backstretch Image), aber ein kleiner Trick mit einem zweiten Container-Element scheint es auch zu tun:

/* Cross browser solution for fixed full background image (incl. iOS) */

body {
  position: relative;
}

.pagebg-container {
  background: url('/path/to/background-image.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;  
  position: fixed;
  width: 100%;
}

Was geschieht hier?

Angenommen das Hintergrundbild sollte ursprünglich das gesamte body-Element ausfüllen, dann erstellen wir innerhalb von diesem ein div und geben ihm die Regeln, die eigentlich für body bestimmt gewesen wären.

Unser neuer Bildcontainer muss sein Eltern-Element vollständig ausfüllen, denn er bekommt das ursprünglich für body geplante background-size: cover verpasst. Anstelle von background-attachment: fixed können wir nun aber position: fixed verwenden.

Dagegen haben jetzt auch die Eigenbrötler unter den Betriebssystemen und online-Browsern nichts mehr einzuwenden.

Bearbeitet: 2019-10-13
Veröffentlicht: 2015-09-07
Rubrik: Design & Development

Stefan Buchberger

Über den Autor

Stefan Buchberger beschäftigt sich seit vielen Jahren mit der Präsentation, Verbreitung und Kommunikation von Inhalten. Er war vor allem als Buchverleger aktiv.

Heute gilt seine Aufmerksamkeit einer nachhaltigeren Form der Webentwicklung, welche die Inhalte zurück in den Fokus rückt.

Seitenleiste

Neue Beiträge

SiteGround: Renewal Reminders

Sobald sich die Vertragslaufzeit für einen SiteGround-Service (z.B. Hosting oder Domain) ihrem Ende nähert, erhalten …

Wartungsbericht: Begriffe erklärt

Unsere Wartungskunden erhalten regelmäßig einen individuellen Wartungsbericht für ihre Websites. Einige Begriffe, die wir darin …

Internationale Literaturdialoge

Das Projekt Internationale Literaturdialoge möchte innovative Kooperationsprojekte österreichischer Literaten mit Kreativen im Ausland ins Leben …
Mann skizziert Projekt auf Tafel

Wege zur Website: Nach Maß und von der Stange

Websites entstehen individuell und nach Maß oder auf Basis bestehender Vorlagen. Vielfach aber: sowohl als …
Boy singing in microphone

Testimonials: Das sagen unsere Kunden

Im Mittelpunkt eines Projekts steht für uns selbstverständlich die Zufriedenheit des Auftraggebers. Wir freuen uns …

Newsletter

Unser Newsletter mit Tipps und Angeboten erscheint wenige Male im Jahr. Infos zu Versand und Verarbeitung erhalten Sie in unserer Datenschutzerklärung.

    nav-social-menu

    • LinkedIn
    • RSS
  • Impressum
  • Datenschutz
Top ▲
Top ▲
Finde

Zeige alle ...

Generic filters