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.

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.

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

 

Hintergrundbild skalieren mit CSS

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 ansehen *

 

Browser-Test

Das CSS Snippet habe ich dabei in diesen Browsern getestet:

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

In den genannten Browsern klappte das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses Beispiel auch in älteren Browsern 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.