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.

Zurück

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

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!

Contao Spezialist - Contao Problemlösungen

Viele weitere, ähnliche und hoffentlich hilfreiche Beiträge findet Ihr im kompletten Contao-Helpdesk das ständig erweitert wird.

Zum Contao-Helpdesk...