HTML-Hintergründe: So verleihst du deiner Website das perfekte Design
HTML-Hintergründe definierst du über Farbwerte oder gestaltest sie mit Bilddateien. Mit dem passenden Background verbesserst du nicht nur das Design deiner Website, sondern stellst auch sicher, dass deine Inhalte gut lesbar bleiben.
Was sind HTML Backgrounds?
Als HTML Background wird die Fläche hinter dem Content einer Webseite bezeichnet. Diese Hintergründe kannst du beim Erstellen einer Seite direkt in HTML festlegen und auch später jederzeit anpassen. Standardmäßig sind HTML-Hintergründe weiß. Eine Änderung hilft dir dabei, das Design deiner Website aufzuwerten und sorgt dafür, dass deine Inhalte optimal zur Geltung kommen.
Was eignet sich als HTML-Hintergrund?
Es gibt zwei gängige Wege, um HTML-Hintergründe zu gestalten:
- über einen Farbwert
- mit einem Bild oder einem Farbverlauf
Die Werte legst du über das HTML-Attribut style fest. In den nächsten Abschnitten zeigen wir dir beide Varianten im Detail.
HTML Backgrounds per Farbwert festlegen
Um die Farbe deiner HTML-Hintergründe anzupassen, nutzt du das style-Attribut sowie die Eigenschaft background-color oder bgcolor. Für die Angabe des Farbwerts stehen dir drei Optionen zur Verfügung:
- Farbname: Du kannst die Farbe über ihren englischen Namen bestimmen. Neben Klassikern wie
red,yellowodergreenfunktionieren auch spezielle Töne wielightblueoderdeepskyblue. Groß- und Kleinschreibung spielt hier keine Rolle. - Hex-Farbcode: Nutze eine sechsstellige Hexadezimalzahl für präzise Farben. Diese setzt sich aus drei Paaren zusammen (Ziffern
0bis9und Buchstabenabisf). Das erste Paar definiert den Rotwert, das zweite den Grünwert und das dritte den Blauwert. Dabei ist 00 der kleinste und ff der höchste Wert. Reines Blau wäre somit0000ff. - RGB-Wert: Alternativ verwendest du den RGB-Wert, auf dem auch der Hex-Code basiert. Die Werte liegen zwischen
0und255für die Kanäle Rot, Grün und Blau. Blau entspricht hier RGB (0, 0, 255).
Die Syntax für deine gewünschte Hintergrundfarbe sieht so aus:
<body style="background-color: wert;">Im folgenden Beispiel nutzen wir einen Hex-Farbcode, um ein helles Blau als Hintergrund zu wählen:
<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>So sieht das Ergebnis aus:
Du kannst die Farben für HTML Backgrounds auch gezielt für einzelne Segmente deiner Webseite definieren. Dazu nutzt du ebenfalls das style-Attribut und die Eigenschaft background-color. Wie das glatt läuft, zeigt dir dieses Beispiel mit verschiedenen Farben für den allgemeinen Hintergrund, <h2>-Überschriften und <p>-Textabschnitte:
<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>
Bilder als HTML-Hintergründe nutzen
Falls du Grafiken oder Fotos als HTML Backgrounds einsetzen möchtest, sollten diese in Bildformaten wie JPG, PNG, SVG, WebP oder GIF vorliegen. Hier siehst du den Code, um ein Bild als Hintergrund einzubinden – den Pfad zur Datei musst du individuell anpassen:
<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>Achte bei Hintergrundbildern immer auf die Lesbarkeit deiner Texte. Durch zusätzliche Parameter lässt sich die Positionierung deiner Grafik jederzeit so optimieren, dass alles harmonisch wirkt.