Hintergrundbild skalieren

Mit Hilfe von CSS ist es möglich, auf einer Webseite ein nahezu perfektes Hintergrundbild darzustellen. Du kannst sogar automatisch das Hintergrundbild skalieren lassen.

In diesem Artikel zeige ich dir schließlich, wie du das mit CSS auch machen kannst.

Hintergrundbild skalieren mit CSS

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

Mit dem nachstehenden Code Beispiel kannst du dann dein Hintergrundbild sehr einfach skalieren lassen. Wie bereits in der Einleitung beschrieben, skaliert das Hintergrundbild nicht nur automatisch, sondern es zentriert sich auch noch. Somit bleibt es immer mit der passenden Größe an der selben Position.


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:

Folge einfach diesem Link* (öffnet in einem neuen Tab), um dir das Beispiel im Browser anzusehen.

Browser Test

Das oben genannte CSS Snippet habe ich überdies in folgenden Browsern getestet.

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

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.

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


Anzeige:


Schreibe einen Kommentar