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.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: