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.
