03.12.2020 | Allgemein, Netzwelt, Webentwicklung
Ein kleiner Workarround: CSS Background Cover auf Tablet falsch skaliert

Vermutlich jeder kennt es, via CSS ein Background-Image über die gesamte Seite zu ziehen. Skaliert wird es in allen aktuellen Browsern gut und eine gute Größe sind 1920×1080 Pixel. Auf Tablets hingegen funktioniert das nicht auf diese Weise.

html { 
  background: url(/assets/images/meinCover-1920x1080.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Hierfür gibt es einen einfachen Workarround, um auch auf Tablets ein Hintergrundbild zu hinterlegen, was  über die gesamte Displayfläche skaliert. Angelegt wird ein DIV mit der ID cover-wrapper. Wichtig ist hier die Angabe des z-index, damit keine anderen Flächen der Seite selbst verdeckt werden oder dadurch ihre Funktionalität, etwa beim Einsatz von JavaScript, verlieren. Dieser Wert kann je nach Seite variieren.

Der HTML Schnipsel dazu:

<div id="cover-wrapper"></div>

<style type="text/css">
    
    #cover-wrapper {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -100;
        background-image: url(/assets/images/meinCover-1920x1080.jpg) ;
        background-repeat:no-repeat;
        background-position: center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }        
</style>

Und siehe da! – Das Bild wird perfekt skaliert und nicht mehr verfälscht dargestellt.

geschrieben von Jens (keine Kommentare), , , , , ,

Du kannst diese Seite via PayPal unterstützen: paypal.me/jensbh

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Mit und gemacht in Kassel / Nordhessen. 2022