Wie ihr sicher wisst hat IT-Runde seit längerem ein neues passendes Hintergrundbild. Vorher wurden immer nur kleine Backgrounds horizontal und vertikal wiederholt, was jedoch nicht sehr ansprechend aussah. Deshalb wollte ich eine Grafik in den Hintergrund setzen, welche sich an die Browsergröße anpasst. Habe länger nach einem passenden Code gesucht und es dann schließlich mit dem z-index und der einfachen Streckung auf 100% hinbekommen.

Soweit klappte mein Code auch in den verschiedensten Browsern, doch egal mit welchem mobilen Device man versucht hat die Webseite aufzurufen, führte es zu verschiedenen Problemen. Ein Besucher berichtete mir, dass sich der Hintergrund über den Content auf seinem Android-Smartphone legt – Ein anderer teilte mir mit, dass gar kein Hintergrund angezeigt wird und auf dem iPad konnte man schlicht und einfach gar nicht erst scrollen .

Gerade in der heutigen Zeit wo immer mehr Besucher über ihre mobilen Geräte online gehen, muss so ein Fehler schnellstmöglich behoben werden. Ich suchte also eine andere Lösung und habe mir dann die background-size Funktion von CSS3 näher angeschaut. Einfach einen globalen (html) Background definieren, ihn zentrieren (center) und fixieren (fixed). Soweit noch keine Neuheit, doch mit background-size: cover; bietet CSS3 den Nutzern die Möglichkeit ein Bild so klein es geht zu skalieren, aber trotzdem das Element vollständig zu füllen. Somit ist es kinderleicht die Background-Grafik immer auf 100% zu strecken, ohne dass sich die Seitenverhältnisse des Hintergrundes ändern:

1
2
3
4
5
6
7
8
9

<style type="text/css">
html {
        background: url(http://it-runde.de/dateien/background-fest.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
</style>

Getestet wurde das Ergebnis nun schon im Safari, Google Chrome, Mozilla Firefox und auch dem Internet Explorer – Ohne Probleme. Auch auf dem iPad, iPhone und meinem HTC Desire HD funktioniert IT-Runde wieder ohne Fehler. In älteren Browsern konnte ich dies noch nicht testen, jedoch sollte es auch hier keine Komplikationen geben.

Wer mehr zu background-size und seinen Schlüsselwerten cover bzw. contain erfahren will, kann das auf Norman’s Blog tun. Wer kein CSS 3 verwenden möchte, findet hier auch eine reine CSS, sowie eine jQuery Methode.

Viel Spaß beim ausprobieren