Hintergrundbilder auf iPhone und iPad pixelig und zu gross
Für bildschirmfüllende Bilder im Hintergrund einer Webseite eigent sich die CSS-Methoden mit background-size: cover und background-attachment: fixed eigentlich ideal. Nur blöd wenn das am iPhone und am iPad dann nicht so funktioniert.
Im Speziellen ist der Safari Brwoser daran Schuld, da er mal wieder der Überltäter im System ist:
https://caniuse.com/?search=background-attachment%3A%20fixed
https://caniuse.com/?search=background-size%3A%20cover
Das Problem lässt sich aber wie so oft lösen mit einem einfach Trick. Mittels einer Psydoklasse lässen sich die CSS Methoden doch noch abbilden. Statt also die CSS Einstellungen direkt z.B. in einem body zu übergeben, nutzt man diese z.B. in html::before
Eine passene CSS-Anweisung könnte dann lauten:
html::before {
content: '';
display: block;
background-image: url('https://www.domain.de/bilder/hintergrund.jpg');
background-size: cover;
background-position: center;
height: 100vh; width: 100vw;
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
z-index: -100;
}Zumindest kann man diesen Trick so lange nutzen, bis der Safari endlich mal Geschichte ist, oder dieser Browser sich an die üblichen Regeln hält.
Kein Erfolg mit den hier beschriebenen Contao-Lösungen? Klappt es nicht mit dem gewünschten Contao-Update oder dem Umzug auf einen neuen Hostingserver?
Wenn die Frustration zu groß wird, einfach bei mir melden:
info@liquid-artwork.de - Ansprechpartner: Lars Scheumann
oder per Telefon: 07223 / 91 59 372
Fragen Sie den Contao Spezialisten
Manchmal ist es besser solche umfangreichen Aufgaben dem Profi zu überlassen, der schneller und sorgfältiger damit umgehen kann. Kostet seinen Preis, aber lohnt sich schnell, bevor man sich tagelang damit herum ärgert. LIQUID-ARTWORK betreut auch Kunden die ihre Webseite selbst erstellt haben, oder durch Dritte erstellt wurden. Kurze Anfrage bei mir und nach einer ersten Prüfung kann ich meist einen groben Preis nennen. Die Anfrage bei mir als alleine kostet dabei nichts!
