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.
- 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.
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
odergreen
sind auch Sonderfarben wielightblue
oderdeepskyblue
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
bis9
und den Buchstabena
bisf
. 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 dementsprechend0000ff
. -
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
bis255
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;">
htmlIm 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>
htmlDas Resultat sieht folgendermaßen aus:
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>
htmlBilder 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>
htmlBei 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.
- Inklusive Wildcard-SSL-Zertifikat
- Inklusive Domain Lock
- Inklusive 2 GB E-Mail-Postfach