HTML-Hintergrund

Ein guter Hintergrund macht die Website besonders gut aus.

Beispiel

Gute Kombination von Hintergrund- und Textfarben
Ein Beispiel für eine gute Kombination von Hintergrund- und Textfarben, die das Lesen der Texte auf der Seite erleichtert.
Schlechte Kombination von Hintergrund- und Textfarben
Ein Beispiel für eine schlechte Kombination von Hintergrund- und Textfarben, die das Lesen der Texte auf der Seite erschwert.

(Mehr Beispiele finden Sie am Ende dieser Seite.)

Hintergrund (Backgrounds)

<body> Besitzt zwei Tags zur Konfiguration des Hintergrunds. Der Hintergrund kann eine Farbe oder ein Bild sein.

Hintergrundfarbe (Bgcolor)

Die Eigenschaft "Hintergrundfarbe" setzt den Hintergrund auf eine bestimmte Farbe. Der Wert kann eine Hexadezimalzahl, einen RGB-Wert oder einen Farbnamen sein.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Die folgenden Codes setzen die Hintergrundfarbe auf schwarz.

Hintergrund (Background)

Das Hintergrundattribut setzt den Hintergrund auf ein Bild. Der Wert des Attributes ist die URL des Bildes. Wenn die Größe des Bildes kleiner ist als das Browserfenster, wird das Bild im gesamten Browserfenster kopiert.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

Die URL kann ein relativer Pfad sein, wie im ersten Zeilencode. Es kann auch eine absolute Adresse sein, wie im zweiten Zeilencode.

Tipp:Wenn Sie vorhaben, Hintergrundbilder zu verwenden, sollten Sie sich daran erinnern:

  • Erhöht das Hintergrundbild die Ladezeit der Seite. Tipp: Bilddateien sollten nicht größer als 10k sein.
  • Passt das Hintergrundbild gut zu anderen Bildern auf der Seite?
  • Passt das Hintergrundbild gut zur Textfarbe auf der Seite?
  • Schaut das Raster der Bilder auf der Seite nach dem Fliesen gut aus?
  • Wird die Aufmerksamkeit für den Text durch das Hintergrundbild abgelenkt?

Grundlegende注意事项 - Nützliche Tipps:

Die Attribute <body> bgcolor, background und text im neuesten HTML-Standard (HTML4 und XHTML) sind veraltet. W3C hat diese Attribute in ihren Empfehlungsstandards entfernt.

Sie sollten Cascading Style Sheets (CSS) verwenden, um die Layout- und Anzeigeeigenschaften von HTML-Elementen zu definieren.

Mehr Beispiele

Hintergrundbilder mit hoher Zugänglichkeit
Beispiel, bei dem Hintergrundbilder und Textfarben die Lesbarkeit der Seitentexte verbessern.
Hintergrundbilder mit hoher Zugänglichkeit 2
Ein weiteres Beispiel mit Hintergrundbildern und Textfarben, die die Lesbarkeit der Seitentexte verbessern.
Hintergrundbilder mit schlechter Zugänglichkeit
Beispiele, bei denen die Hintergrundbilder und Textfarben die Lesbarkeit der Seitentexte beeinträchtigen.