CSS Background Image: Befehle, Positionen und mehr

Martin Maciej

Mit den „Background Image“-Befehlen in CSS stattet ihr euer Projekt mit einem Hintergrundbild aus. Erfahrt hier, welche Möglichkeiten man beim Einsatz des CSS Background Images hat und aus welchen Bestandteilen der Background-Image-Befehl in CSS besteht.

CSS Background Image: Befehle, Positionen und mehr

Neben Hintergrundfarben können mit CSS natürlich auch Hintergrundbilder verwendet werden. Wird ein Bild eingesetzt, sollte man dennoch nicht auf den Einsatz der Hintergrundfarbe verzichten, schließlich kann es sein, dass das Bild möglicherweise nicht angezeigt werden kann.

CSS Background Image: Position

Das Background-Image wird dann über die gesetzte Hintergrundfarbe gelegt. Möchte man das Bild für das Projekt in CSS setzen, wird der folgende Befehl benötigt.

background-image: url(<uri>) | none

Hinter „url“ versteckt sich die Adresse des Bilds, z. B. auf einem Server oder lokal auf der Festplatte. Dabei kann es sich sowohl eine relative, als auch um eine absolute Adresse handeln.

body { background-image: url(bild.gif); }

body { background-image: url(http://irgendwo.com/logo.gif); }

Mit dem Befehl “background-position“ kann die Position des Hintergrundbilds definiert warden.

background-position: <prozent> | <length> | left | center | right

Ausgehend von der linken oberen Ecke des Bildschirms wird das Bild entsprechend der vorgegebenen Werte eingesetzt. Wählt man einen der ersten beiden Einträge, besteht dieser aus zwei Werten, dem horizontalen (x) und dem vertikalen (y). Wird nur ein Wert gesetzt, wird für den anderen Wert die Bildschirmmitte gewählt. Neben Zahlenwerten für die Positionierung des Bilds ist es zudem möglich, left, center oder right zu verwenden. Hier wird das Bild horizontal ausgerichtet.

background-position: 50% 50%; /* Bild wird in der Mitte des Bildschirm angezeigt */background-position: 50%; /* Bild wird ebenfalls mittig platziert */background-position: 100px 100px;background-position: center;

CSS Background Image Befehle

Wird einmal ein Hintergrundbild eingesetzt, wird dieses über die gesamte Projektfläche vervielfacht. Soll das Bild nicht wiederholt angezeigt werden, benötigt man den Befehl „background-repeat“.

background-repeat: repeat | repeat-x | repeat-y | no-repeat

Der „repeat“-Wert ist dabei standardmäßig gesetzt, sprich, das Hintergrundbild wird ohne Angabe mehrfach abgebildet. Um die Kachelung horizontal oder vertikal einzuschränken, verwendet man die Befehle

background-repeat: repeat-x; /* repeat horizontal */

background-repeat: repeat-y; /* repeat vertikal */

Soll die Kachelung ganz deaktiviert werden, verwendet man

background-repeat: no-repeat;

CSS Background Image: Scrollen verhindern

Mit “background-attachment: scroll | fixed“ kann man festlegen, ob das Bild beim Scrollen der Seite mitscrollen soll oder fest an seiner Position bleibt. Hier ist „scroll“ der Default-Wert. Im Genauen bedeutet dies, dass das Hintergrundbild solange mitscrollt, bis der Wert auf „fixed“ gesetzt wird.

background-attachment: scroll; background-attachment: fixed;

Ist dieser gesetzt, werden beim Scrollen der Seite alle HTML-Elemente bewegt, bis auf das Hintergrundbild.

Um euren CSS-Code sauber und kurz zu halten, könnt ihr die Befehle für das CSS-Background-Image auch miteinander kombinieren und verschachteln. Anstelle also jedes einzelne Element einzubauen, könnt ihr auch einfach diesen Codeschnipsel verwenden:

background: white url(logo.gif) no-repeat fixed 50% 50%;

Hierbei wird die Hintergrundfarbe auf weiß gesetzt, während auf ein Hintergrundbild hinter einer URL zugegriffen wird. Das Bild wird nicht gekachelt und scrollt auch nicht mit. Positioniert ist das Hintergrundbild in der Mitte der Webseite.

Zu den Kommentaren

Kommentare zu diesem Artikel

Weitere Themen

Neue Artikel von GIGA SOFTWARE

* Werbung