Hintergrund richtig setzten…

CSS - Hintergründe richtig setzenMit CSS kann man leicht einer Seite einen grafischen Hintergrund geben, wie Sie diesen geschickt setzten und positionieren, erfahren Sie hier.

Wer mit HTML beispielsweise einer Tabelle als Hintergrund ein Bild
zuweist, der hat schnell ein Problem. Das Bild wiederholt sich immer
und immerzu. Dieser Effekt zerstört schnell das Design einer
Seite.
Mit CSS kann man das Verhalten des Hintergrundes dank einiger Befehle
besser beeinflussen.

Inhalt der Tabelle

Ohne Wiederholung

Bei diesem Beispiel wird das Hintergrundbild nur einmal angezeigt,
es wird nicht wiederholt.

Die CSS – Anweisung:

style="background-image: url(hintergrund.gif);
background-repeat: no-repeat"

Inhalt der Tabelle

Horizontale Wiederholung

Wie man sehen kann wird das Hintergrundbild nur in der horizontalen
wiederholt.

Die CSS – Anweisung:

style="background-image: url(hintergrund.gif);
background-repeat: repeat-x"

Die Styleanweisung gibt an, dass das Bild in x-Richtung wiederholt
wird. Die x-Richtung entspricht der Horizontalen. Möchte man
das Bild in der Vertikalen wiederholen lassen, dann muss als Attribut
background-repeat: repeat-y gesetzt
werden.

Inhalt der Tabelle

Zentriert, ohne Wiederholung

Bei diesem Beispiel ist der Hintergrund zentriert, und er wird
nicht wiederholt.

Die CSS – Anweisung:

style="background-image: url(hintergrund.gif);
background-repeat: no-repeat; background-position:
center"

Aus dem CSS Code folgt, das der Hintergrund zentriert ist. Sie
können weitere Positionsangaben machen. Dabei können Sie
folgende Befehle kombinieren:

center – zentriert bzw. mittig
left – links
right – rechts

bottom – unten
top – oben
middle – Mitte

Die erste Angabe die gemacht wird gibt die Position von der horizontalen
aus gesehen. Die zweite Angabe ist dann aus der vertikalen Sicht.
Wird background-position: left center"
gesetzt, dann ist der Hintergrund links und dort zentriert (in der
Mitte) ausgerichtet.

This entry was posted in CSS. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *