Während ich an einer Website gearbeitet habe, bin ich auf ein Problem gestoßen. Die CSS-Direktive background-attachment: fixed;, die dafür sorgt, dass mein Hintergrundbild bleibt wo es ist, auch wenn ich scrolle, funktioniert auf (den meisten) mobilen Endgeräten nicht.
Um den gewünschten Effekt dennoch zu erzielen, baue ich irgendwo auf der Website einen leeren div-Container ein, nenne ihn so etwas wie mobile-bg und begebe mich ins Stylesheet.
In einer Media Query (z.B. max-height: 650px) gebe ich dieser Klasse jetzt folgende Eigenschaften:
.mobile-bg {
background: url(background.jpg) no-repeat top center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
Was passiert hier? Bei einer bestimmten Viewport-Größe forciere ich ein Bild, das den Viewport ausfüllt und setze es mit z-index: 0; in den Hintergrund.
Damit ich jetzt alle meine anderen Elemente noch sehen kann (die jetzt vorerst hinter meinem Hintergrund verschwunden sind) muss ich den anderen Elementen auch noch einen z-index geben. Für die Navigationsleisten bzw. Header & Footer, die immer zu sehen sein sollen, empfiehlt sich ein Wert der eh nie überschritten wird, wie 999, während für den main-Block etwas gemäßigtes wie 8 ausreicht.
Wenn ich diese Media Query verlasse (also die Website mit einem Desktop-Browser angucke) deaktiviere ich diesen Hack mit .mobile-bg { background: none; } und kann meine background-Attribute ganz gewöhnlich benutzen.