Hintergrundbild skalieren

Mit Hilfe von CSS ist es möglich, auf einer Webseite ein nahezu perfektes Hintergrundbild darzustellen.

Das Ziel dieses CSS-Scripts ist es, ein je nach Größe des Browser-Fensters automatisch skalierendes Hintergrundbild auf der Webseite darzustellen. Gleichzeitig soll es immer zentriert bleiben und den Hintergrund komplett füllen. Darüber hinaus bleibt sogar das Seitenverhältnis des Hintergrundbildes unverändert, so dass es nicht verzerrt.

In diesem Artikel zeige ich dir, wie das funktioniert.

 

Skalierendes Hintergrundbild mit CSS

Mit dem nachstehenden Code-Beispiel kannst du ein Hintergrundbild sehr einfach skalieren. Wie bereits in der Einleitung beschrieben, skaliert das Hintergrundbild nicht nur automatisch, sondern es zentriert sich auch noch.

 

Beispiel:

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

 

Anzeigebeispiel ansehen *

 

Browser-Kompatibilität

Dieses CSS-Script habe ich in folgenden Browsern getestet:

  • Google Chrome 20
  • Mozilla Firefox 13
  • Opera 12
  • Internet Explorer 9

In allen genannten Browsern funktionierte das Script dabei einwandfrei. Ich kann darüber hinaus leider nicht versichern, dass dieses Beispiel auch in älteren Browser-Versionen oder hier nicht aufgeführten Browsern funktioniert.

 

* Quelle des im Anzeigebeispiel verwendeten Hintergrundbilds: www.rabbarien.de.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.