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.