HTML Backgrounds: So gestalten Sie den Hintergrund Ihrer Webseiten

HTML-Hintergründe können durch Farbwerte definiert oder mit einer Bilddatei gestaltet werden. Mit dem richtigen Background verbessern Sie nicht nur das Design der Website, sondern gewährleisten auch die Lesbarkeit der Inhalte.

Was sind HTML Backgrounds?

Die Fläche hinter dem Inhalt einer Webseite wird als HTML Background bezeichnet. Diese Hintergründe können bei der Erstellung einer Seite in HTML selbst definiert und auch nachträglich geändert werden. Standardmäßig sind HTML-Hintergründe komplett weiß. Eine Änderung ist nicht nur empfehlenswert, um das Design der Website zu verbessern, sondern sorgt auch für eine bessere Sichtbarkeit der Inhalte.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

Was kann als HTML-Hintergrund genutzt werden?

Es gibt zwei verschiedene Methoden, um HTML-Hintergründe zu gestalten:

  • über einen Farbwert
  • aus einem Bild bzw. einem Farbverlauf

Die Werte werden über das HTML-Attribut style festgelegt. Wir zeigen Ihnen in den folgenden Abschnitten beide Möglichkeiten.

Tipp

In unserem separaten Artikel erfahren Sie mehr über die Möglichkeiten von HTML style.

HTML Backgrounds per Farbwert definieren

Um die Farbe von HTML Backgrounds zu ändern, nutzen Sie das style-Attribut und die Eigenschaft background-color oder bgcolor. Um den Farbwert anzugeben, haben Sie drei verschiedene Optionen:

  • Farbname: Sie haben die Möglichkeit, die gewünschte Farbe über ihren englischsprachigen Namen festzulegen. Neben Standardwerten wie red, yellow oder green sind auch Sonderfarben wie lightblue oder deepskyblue möglich. Groß- und Kleinschreibung ist bei der Angabe nicht relevant.
  • Hex-Farbcode: Sie können Farben auch mithilfe ihrer sechsstelligen Hexadezimalzahl angeben. Diese besteht aus drei Paaren mit den Ziffern 0 bis 9 und den Buchstaben a bis f. Das erste Paar gibt den Rotwert an, das zweite den Grünwert und das dritte den Blauwert, wobei die Kombination 00 der niedrigste und ff der höchste Wert ist. Blau wäre dementsprechend 0000ff.
  • RGB-Wert: Alternativ 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 dementsprechend RGB (0, 0, 255).

Die Syntax, mit der Sie die gewünschte Farbe für Ihre HTML-Hintergründe festlegen, sieht so aus:

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

Im folgenden Beispiel nutzen wir einen Hex-Farbcode, um ein helles Blau als Hintergrundfarbe festzulegen:

<!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 folgendermaßen aus:

Beispielhafter HTML-Hintergrund auf Basis des Hex-Codes „#BFEFFF”

Bei Bedarf können Sie die Farben für HTML Backgrounds auch für einzelne Bereiche Ihrer Webseiten separat definieren. Dafür wird ebenfalls das style-Attribut und die Eigenschaft background-color genutzt. Die Funktionsweise sehen Sie im folgenden Beispiel, in dem verschiedene Farben für den allgemeinen Hintergrund sowie die Hintergründe von <h2>-Überschriften und <p>-Textpassagen 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
HTML-Hintergrund-Beispiel mit drei verschiedenen Farben

Bilder als HTML-Hintergründe festlegen

Um Bilder bzw. Grafiken als HTML Backgrounds verwenden zu können, müssen diese in den Bildformaten JPG, PNG, SVG, WebP oder GIF gespeichert sein. Im folgenden Beispiel sehen Sie den passenden Code für die Einbindung eines Bildes als Hintergrund – der Pfad zum Bild ist dabei individuell anzupassen:

<!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 Lesbarkeit des Inhalts im Hinterkopf behalten. Indem Sie weitere Parameter angeben, können Sie die Positionierung von Bild bzw. Grafik zu diesem Zweck jederzeit anpassen.

Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach
War dieser Artikel hilfreich?