HTML-Hin­ter­grün­de können durch Farbwerte definiert oder mit einer Bilddatei gestaltet werden. Mit dem richtigen Back­ground ver­bes­sern Sie nicht nur das Design der Website, sondern ge­währ­leis­ten auch die Les­bar­keit der Inhalte.

Was sind HTML Back­grounds?

Die Fläche hinter dem Inhalt einer Webseite wird als HTML Back­ground be­zeich­net. Diese Hin­ter­grün­de können bei der Er­stel­lung einer Seite in HTML selbst definiert und auch nach­träg­lich geändert werden. Stan­dard­mä­ßig sind HTML-Hin­ter­grün­de komplett weiß. Eine Änderung ist nicht nur emp­feh­lens­wert, um das Design der Website zu ver­bes­sern, sondern sorgt auch für eine bessere Sicht­bar­keit der Inhalte.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

Was kann als HTML-Hin­ter­grund genutzt werden?

Es gibt zwei ver­schie­de­ne Methoden, um HTML-Hin­ter­grün­de zu gestalten:

  • über einen Farbwert
  • aus einem Bild bzw. einem Farb­ver­lauf

Die Werte werden über das HTML-Attribut style fest­ge­legt. Wir zeigen Ihnen in den folgenden Ab­schnit­ten beide Mög­lich­kei­ten.

Tipp

In unserem separaten Artikel erfahren Sie mehr über die Mög­lich­kei­ten von HTML style.

HTML Back­grounds per Farbwert de­fi­nie­ren

Um die Farbe von HTML Back­grounds zu ändern, nutzen Sie das style-Attribut und die Ei­gen­schaft background-color oder bgcolor. Um den Farbwert anzugeben, haben Sie drei ver­schie­de­ne Optionen:

  • Farbname: Sie haben die Mög­lich­keit, die ge­wünsch­te Farbe über ihren eng­lisch­spra­chi­gen Namen fest­zu­le­gen. Neben Stan­dard­wer­ten wie red, yellow oder green sind auch Son­der­far­ben wie lightblue oder deepskyblue möglich. Groß- und Klein­schrei­bung ist bei der Angabe nicht relevant.
  • Hex-Farbcode: Sie können Farben auch mithilfe ihrer sechs­stel­li­gen He­xa­de­zi­mal­zahl angeben. Diese besteht aus drei Paaren mit den Ziffern 0 bis 9 und den Buch­sta­ben a bis f. Das erste Paar gibt den Rotwert an, das zweite den Grünwert und das dritte den Blauwert, wobei die Kom­bi­na­ti­on 00 der nied­rigs­te und ff der höchste Wert ist. Blau wäre dem­entspre­chend 0000ff.
  • RGB-Wert: Al­ter­na­tiv nutzen Sie den RGB-Wert, der auch die Grundlage für den Hex-Farbcode ist. Die Werte befinden sich im Spektrum 0 bis 255 und beziehen sich wieder auf die Farben Rot, Grün und Blau. Blau wäre dem­entspre­chend RGB (0, 0, 255).

Die Syntax, mit der Sie die ge­wünsch­te Farbe für Ihre HTML-Hin­ter­grün­de festlegen, sieht so aus:

<body style="background-color: wert;">
html

Im folgenden Beispiel nutzen wir einen Hex-Farbcode, um ein helles Blau als Hin­ter­grund­far­be fest­zu­le­gen:

<!DOCTYPE html>
<html lang="de">
<head>
<title>Hintergrund-Beispiel</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Dies ist Ihre Headline</h1>
<p>
Hier stehen die Inhalte Ihrer Website.
</p>
</div>
</body>
</html>
html

Das Resultat sieht fol­gen­der­ma­ßen aus:

Bild: HMTL-Hintergrund: Farb-Beispiel
Bei­spiel­haf­ter HTML-Hin­ter­grund auf Basis des Hex-Codes „#BFEFFF”

Bei Bedarf können Sie die Farben für HTML Back­grounds auch für einzelne Bereiche Ihrer Webseiten separat de­fi­nie­ren. Dafür wird ebenfalls das style-Attribut und die Ei­gen­schaft background-color genutzt. Die Funk­ti­ons­wei­se sehen Sie im folgenden Beispiel, in dem ver­schie­de­ne Farben für den all­ge­mei­nen Hin­ter­grund sowie die Hin­ter­grün­de von <h2>-Über­schrif­ten und <p>-Text­pas­sa­gen definiert wurden:

<!DOCTYPE html>
<html lang="de">
<head>
<title>Hintergrund Beispiel</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>Der Hintergrund dieser Headline hat den Farbwert DodgerBlue.</h2>
<p>Dieser Hintergrund hat den Farbwert DarkTurquoise.</p>
</body>
</html>
html
Bild: Beispiel: Drei verschiedenfarbige HTML Backgrounds
HTML-Hin­ter­grund-Beispiel mit drei ver­schie­de­nen Farben

Bilder als HTML-Hin­ter­grün­de festlegen

Um Bilder bzw. Grafiken als HTML Back­grounds verwenden zu können, müssen diese in den Bild­for­ma­ten JPG, PNG, SVG, WebP oder GIF ge­spei­chert sein. Im folgenden Beispiel sehen Sie den passenden Code für die Ein­bin­dung eines Bildes als Hin­ter­grund – der Pfad zum Bild ist dabei in­di­vi­du­ell an­zu­pas­sen:

<!DOCTYPE html>
<html lang="de">
<head>
<title>Hintergrund Beispiel</title>
<style>
	body { background-image: url('/nutzer/ordner/assets/hintergrund/img/bild.svg');	background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Dies ist Ihre Headline</h1>
<p>
Hier stehen die Inhalte Ihrer Website.
</p>
</div>
</body>
</html>
html

Bei der Nutzung eines Bildes sollten Sie unbedingt die Les­bar­keit des Inhalts im Hin­ter­kopf behalten. Indem Sie weitere Parameter angeben, können Sie die Po­si­tio­nie­rung von Bild bzw. Grafik zu diesem Zweck jederzeit anpassen.

Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung
Zum Hauptmenü