CSS Tutorials > Hintergrundbild mit CSS

CSS > Hintergrundbild mit CSS

Autor: newwarrior

Kurzer Einblick, wie man mit CSS ganz leicht Hintergrundbilder einrichten kann und ihre Einstellungsmöglichkeiten

Schritt 1

Moin,

also mit CSS ist es ganz leicht ein Hintergrundbild einzurichten.

Code:

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

So und schon ist es eingerichtet. Doch man kann es noch weiter konfigurieren.
Man kann mit

Code:

body {
background-image:url('bild.jpg');
background-repeat:no-repeat;
}

no-repeat = Keine Wdh.
repeat-x = horizontale Wdh.
repeat-y = vertivale Wdh.

Mit, background-repeat können Sie einstellen, ob das Hintergrundbild wiederholt werden soll oder nicht. Weitere Möglichkeiten stehen oben.

Des weiteren kann man mit:

Code:

body {
background-image:url('bild.jpg');
background-repeat:no-repeat;
background-position:left;
}

left = Linksbündig.
right = Rechtsbündig.
top = Oben.
bottom = Unten.
center = Zentriert.
center = Vertikal in der Mitte.

Mit, background-position können Sie einstellen, wo das Hintergrundbild erscheinen soll. Sie können nicht nur mit den Möglichkeiten oben arbeiten, sondern auch mit Prozentangaben oder Pixeln!

Die letzte Einstellungsmöglichkeit ist background-attachment.

Code:

body {
background-image:url('bild.jpg');
background-repeat:no-repeat;
background-position:left;
background-attachment:fixed;
}

Hier gibt es nur zwei Einstellungsmöglichkeiten. Bei fixed scrollt das Bild nicht mit. Bei scroll hingegen tut es dieses.

Ich hoffe ich konnte euch kurz und schnell erklären wie man Hintergrundbilder einrichten kann mit CSS!