5202

ein Blog über technische Fragen zu Blogger

miscellaneous no3: Bildschirmfüllende Hintergrundbilder

von

Hintergrundbilder in voller Bildschirmgröße können sehr eindrucksvoll sein. Das ganze hat nur einen Hacken, nämlich um auch auf großen Bildschirmen zu wirken, muss das Hintergrundbild in sehr großer Auflösung vorliegen. So ein Bild in hoher Auflösung kostet euch natürlich viel Bandbreite & Ladezeit.

Damit Besucher mit kleineren Bildschirmen nicht sinnlos große Bilder laden müssen, könnt ihr euer Hintergrundbild an die Bildschirmgröße eurer Besucher anpassen. Dabei gibt es zwei Weg, einmal mit CSS und einmal mit Javascript.

Lösung mit CSS

Zuerst eine Lösung mit CSS.

Ihr könnt euer Hintergrund-Bild mit der Eigenschaft background laden und mit background-size: cover so skalieren, dass der gesamte Hintergrund mit der maximal möglichen Größe vom Bild bedeckt ist. Dabei wird das Bild vom Browser zugeschnitten.

.foo { 
  background: url(https://bild.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

Über Medie-Queries liefert ihr verschieden Bildergrößen für den Hintergrund aus.

  @media (max-width: 1000px) {
  .foo { 
  background: url(https:bild_small.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  }
}
@media (min-width: 1000px) {
  .foo { 
  background: url(https:bild_big.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
           background-size: cover;
  }
}

Damit das a bisserl weniger abstrakt ist, habe ich einen CodePen gebaut:

See the Pen wEjng by oliver (@5202) on CodePen.

Schiebt und zieht den Browser in der Vollbilddarstellung auseinander & zusammen und seht, wie dabei das Hintegrundbild skaliert.

Ein Hintergrundbild mit CSS scheint vordergründig nur Vorteile zu haben. Aber: Die Skalierung erfolgt im Browser, d.h. eure Framerate sinkt in’s unterirdische und die Seite wird ‘zäh’. Solange ihr nicht scrollen müsst, ist das okay, aber für größere Seite kann das ein ernsthaftes Problem werden.

Lösung mit Javascript

Alle über Google gehosteten Bilder sind von Haus aus adaptiv, d.h. können in der jeweils passenden Größe ausgeliefert werden.

Scheidet ein Bild über Attributen zu - Beispiel:

https://lh6.googleusercontent.com/-/w300-h200-p/.png

Dieses Bild hat 300px Breite, eine Höhe von 200px und ist auf die Mitte zentriert [p]. Das croppen das Bildes wird dabei serverseitig von Google erledigt.

Wir nützen das aus, indem wir mit Javascript die jeweilige Höhe/Breite vom Browser abfragen und dann das Hintergrundbild in der exakt passenden Größe laden.

Schritt1:

Wir geben dem body Tag eine Data-Url mit dem Hintergrundbild:

<body data-url="https://lh6.googleusercontent.com/.../s200/....jpg">
Schritt2:

Wir schreiben eine Funktion, in der wir die Höhe und Breite des Browsers abfragen:

 function go() {
        var a = document.getElementsByTagName("body")[0],
            w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],
            x = w.innerWidth || e.clientWidth || g.clientWidth,
            y = w.innerHeight || e.clientHeight || g.clientHeight,
    }

Dabei ist x die Breite und y die Höhe des Browsers.

Jetzt geben wir mit diesem Werten dem body Tag einen passenden Hintergrund:

function go() {
    var a = document.getElementsByTagName("body")[0],
        w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = w.innerWidth || e.clientWidth || g.clientWidth,
        y = w.innerHeight || e.clientHeight || g.clientHeight,
        z = a.getAttribute("data-url").replace(/\/s\B\d{2,4}/, "/" + "w" + x + "-h" + y + "-p");
    g.style.backgroundImage = 'url(' + z + ')';
}

Als letztes rufen wir die Funktion über einen Eventlistener auf, wenn sich die Größe des Browsers ändert.

 window.addEventListener('resize', go);

Auch dazu gibt es einen CodePen:

See the Pen ximwn by oliver (@5202) on CodePen.

Ihr seht im Vollbild, wie das Hintergrundbild neu geladen wird, wenn sich die Größe des Browsers ändert. Das scheint zunächst weniger ‘smooth’ zu sein als die Methode mit CSS - aber die Seite behält insgesamt eine höhere Framerate und lädt auch schneller [weil das Hintergrundbild immer passend ist].

Schließende Gedanke

Bilder auf passende Bildschirmgröße auszuliefern, kann harte Arbeit sein. Innerhalb von Google Diensten sind Bilder so vorbereitet, dass sie sich adaptiv nutzen lassen. Es lohnt sich meiner Ansicht nach, das auch zu tun, zumal ihr das mit ein paar Zeilen JS hinbekommt.