# 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. ## 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: ```html ``` Im folgenden Beispiel nutzen wir einen Hex-Farbcode, um ein helles Blau als Hintergrundfarbe festzulegen: ```html Hintergrund-Beispiel

Dies ist Ihre Headline

Hier stehen die Inhalte Ihrer Website.

``` Das Resultat sieht folgendermaßen aus: [![Bild: HMTL-Hintergrund: Farb-Beispiel](https://www.ionos.com/de-ch/digitalguide/fileadmin/_processed_/3/7/csm_html-farb-hintergrund-beispiel_972bc69172.webp "HMTL-Hintergrund: Farb-Beispiel")](https://www.ionos.com/de-ch/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-farb-hintergrund-beispiel.png) 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 `

`-Überschriften und `

`-Textpassagen definiert wurden: ```html Hintergrund Beispiel

Der Hintergrund dieser Headline hat den Farbwert DodgerBlue.

Dieser Hintergrund hat den Farbwert DarkTurquoise.

``` [![Bild: Beispiel: Drei verschiedenfarbige HTML Backgrounds](https://www.ionos.com/de-ch/digitalguide/fileadmin/_processed_/4/3/csm_html-hintergruende-beispiel-2_12a5c8a7bb.webp "Beispiel: Drei verschiedenfarbige HTML Backgrounds")](https://www.ionos.com/de-ch/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-hintergruende-beispiel-2.png) 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: ```html Hintergrund Beispiel

Dies ist Ihre Headline

Hier stehen die Inhalte Ihrer Website.

``` 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. This is a markdown version of: [https://www.ionos.com/de-ch/digitalguide/websites/web-entwicklung/html-backgrounds/](https://www.ionos.com/de-ch/digitalguide/websites/web-entwicklung/html-backgrounds/) for AI/LLM consumption.