So ändern Sie die HTML Background Color Ihrer Webseite
Veröffentlicht am 03.04.2025 von DomainFactory
Die Farben einer Website wecken Gefühle und beeinflussen das Verhalten der Seitenbesucher. Sie stellen ein zentrales Element der User Experience (UX) und des User Interface (UI) dar. Website-Betreiber fragen sich oft, welche Hintergrundfarbe am besten passt und die Konversionsrate erhöht. In diesem Beitrag zeigen wir Ihnen, wie Sie die HTML Background Color ändern, geben Tipps zur Farbauswahl und erläutern, wie Sie häufige Fehler vermeiden.
Die HTML Background Color ändern
HTML (Hypertext Markup Language) strukturiert Texte, Bilder und Links auf einer Website und bietet keine direkte Methode zur Änderung der Hintergrundfarbe. Das Design und die Farben definieren Sie vielmehr mit der Gestaltungs- und Formatierungssprache CSS (Cascade Style Sheets). Das CSS-Attribut für die Hintergrundfarbe ist "background-color". Sie können CSS inline, intern oder extern einbinden.
Inline Style HTML
In einem HTML-Dokument kann die Festlegung der Farbe des Body-Elements mit dem Style-Attribut erfolgen:
<html>
<head>
</head>
<body style="background-color: lightblue;">
…
</body>
</html>
Hinweis: Statt "lightblue" für hellblau oder "red" für rot können Sie auch Hexadezimal- oder RGB-Werte verwenden, zum Beispiel #89cff0 für hellblau oder rgb(137, 207, 240).
Interne CSS-Anweisungen
Festlegung einer hellblauen Hintergrundfarbe im Kopf des HTML-Dokuments
Für eine bessere Übersicht können Sie das Design auch per internem CSS im Kopf (Header) des HTML-Dokuments definieren:
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
…
</body>
</html>
Empfohlen: Externe CSS-Datei
Es lohnt sich, alle Farben und Designelemente in einer separaten CSS-Datei festzulegen. Diese Datei binden Sie im Header aller HTML-Dokumente ein, sodass das Design für alle Seiten gilt. Auf diese Weise lässt sich das Aussehen verschiedener Webseiten leicht vereinheitlichen. Der Code in der CSS-Datei (zum Beispiel style.css) sieht dann so aus:
body {
background-color: lightblue;
}
Hinweis: Mit Inline- und internem CSS können Sie den in der CSS-Datei definierten Stil überschreiben.
Hintergrundfarbe auswählen
Die Farbwahl gehört zu den wichtigsten Elementen des Webdesigns. Berücksichtigen Sie bei der Auswahl der Hintergrundfarbe Ihrer Website Faktoren wie Lesbarkeit, Scannbarkeit und den Kontext inklusive der Zielgruppe. Eine Grundregel besagt, dass die Auswahl der Background Color zum Inhalt passen sollte. Helle Farben wecken die Aufmerksamkeit, während entspannende Farbtöne Besucher länger auf der Seite halten. Die Farbpalette beeinflusst:
- das Markenbewusstsein
- die unterbewusste Produktbeurteilung
- die Erinnerung an das Produkt / die Marke
- die emotionale Reaktion auf den Inhalt
- die Kaufentscheidung
Die Auswahl der Website-Farben spielt daher eine wichtige Rolle. Ein heller oder weißer Hintergrund eignet sich oft für textlastige Seiten, während ein dunkler Hintergrund besser bei vielen Fotos und Videos passt.
- Rot steht für Energie und Leidenschaft und eignet sich unter anderem für den Hintergrund eines Restaurants.
- Gelb schafft eine warme, einladende Atmosphäre, die Farbe wird mit Freude assoziiert.
- Orange steht für Fröhlichkeit und Optimismus.
- Grün wirkt beruhigend und natürlich und vermittelt Eigenschaften wie Nachhaltigkeit.
- Blau weckt Vertrauen.
- Weiß wird hauptsächlich als Hintergrundfarbe genutzt und eignet sich gut für ein minimalistisches Design.
Für ein modernes und ansprechendes Design sind auch Hintergründe mit Farbverläufen (Gradients) beliebt. CSS bietet hierfür zahlreiche Möglichkeiten.
Beispiele:
Ein Farbverlauf von links nach rechts als Hintergrundfarbe
body{
background: linear-gradient(to right , #ff7e5f, #feb47b);
}
Oder
Hintergrund mit Radial Gradient
body {
background: radial-gradient(#e66465, #9198e5);
}
Alternativen zur Hintergrundfarbe
Anstelle einer einfarbigen Hintergrundfarbe oder eines Farbverlaufs können Sie Bilder und Videos verwenden und so interessante Effekte erreichen.
Ein Bild als Hintergrund:
Ein Video als Hintergrund:
HTML-Code:
<video autoplay loop id="myVideo" poster ="vorschaubild.jpg">
<source src="videodatei.webm" type="video/webm">
<source src="videodatei.m4 type="video/mp4">
</video>
CSS-Code für Vollbild-Hintergrundvideo:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;}
Häufige Fehler bei der Wahl des Hintergrunds vermeiden
Achten Sie bei der Entscheidung für die Background Color auf folgende Punkte:
- Kontrastverhältnis: Der Kontrast zwischen Hintergrund und Textfarbe muss eine leichte Lesbarkeit gewährleisten. Das ist eine essenzielle Anforderung für die Barrierefreiheit einer Website. Das Kontrastverhältnis zwischen zwei Farben können Sie zum Beispiel mit dem Accessibility Checker testen.
- Zu viele Farben: Verwenden Sie nicht zu viele Farben, das macht sonst schnell einen unprofessionellen Eindruck. Die 60-30-10 Regel besagt für das HTML-Farbschema: Hauptfarbe (60 %), Sekundärfarbe (30 %) und die Akzentfarbe (10 %) zur Lenkung der Aufmerksamkeit auf wichtige Elemente wie Call-to-Action-Buttons.
- Performance: Achten Sie bei Hintergrundbildern und -videos auf eine geringe Dateigröße, damit die Website schnell lädt.
Website-Farben anpassen und Wirkung testen
Testen Sie die Wirkung einer neuen Hintergrundfarbe, eines anderen Hintergrundbilds oder -videos im Vergleich zur vorherigen Version mit einem A/B-Split-Test. Die Hälfte der Besucher sieht die Seite mit der alten HTML Background Color und die andere Hälfte mit der neuen Farbe, dem neuen Bild oder Video. Faktoren wie Verweildauer und Klickraten zeigen, ob die Änderung einen positiven Effekt hat.
HTML Background Color der Website ändern - Zusammenfassung
Sie können CSS inline, intern oder extern mit HTML verknüpfen. Um die Hintergrundfarbe für alle Unterseiten zu definieren, empfiehlt sich eine externe CSS-Datei. So genügt für die Änderung der HTML Background Color eine Anpassung des Werts in der Datei. Probieren Sie die Möglichkeiten zur Änderung der Hintergrundfarbe jetzt aus und schauen Sie sich auch die Hosting-Optionen von DomainFactory für zuverlässiges, sicheres und schnelles Hosting Ihrer Website an!
Titelmotiv: Bild von J S auf Pixabay
