PDF herunterladen PDF herunterladen

In diesem wikiHow zeigen wir dir, wie du die Hintergrundfarbe einer Webseite änderst, indem du ihren HTML-Code bearbeitest.

Methode 1
Methode 1 von 4:

Vorbereitungen zum Bearbeiten des HTML-Codes

PDF herunterladen
  1. HTML-Farben werden durch Codes auf Basis von Nuancen definiert. Du kannst den kostenlosen HTML-Farbwähler von W3Schools verwenden, um den bzw. die Codes für die gewünschten Farben herauszufinden:
  2. Ab HTML5 wird das HTML-Attribut <bgcolor> nicht mehr unterstützt. Die Hintergrundfarbe sollte, wie alle anderen Stilaspekte deiner Seite, mit CSS gehandhabt werden. [1]
    • Du kannst auf einem PC Notepad++ oder Notepad nutzen, auf einem Mac TextEdit oder BBEdit.
  3. Alle Stilinformationen für deine Seite (einschließlich der Hintergrundfarbe) sollten zwischen den Tags <style></style> angegeben werden:
       <! 
       DOCTYPE 
       html 
       > 
       < 
       html 
       > 
       < 
       head 
       > 
       < 
       style 
       > 
       </ 
       style 
       > 
       </ 
       head 
       > 
       </ 
       html 
       > 
      
  4. Du solltest eine Zeile haben, auf der du unter dem <style> Tag und über dem </style> Tag Informationen eingeben kannst.
  5. Tippe dies zwischen die Tags <style></style> ein:
    Werbeanzeige
Methode 2
Methode 2 von 4:

Eine durchgehende Hintergrundfarbe einstellen

PDF herunterladen
  1. Normalerweise sollte er relativ weit oben stehen.
  2. Tippe zwischen die body-Klammern background-color: ein. Du solltest jetzt das folgende "body" Element haben:
       body 
       { 
       background-color 
       : 
       } 
      
    • In diesem Kontext funktioniert nur eine Schreibweise von "color". Du kannst hier nicht "colour" schreiben.
  3. Tippe den numerischen Code der ausgewählten Farbe gefolgt von einem Strichpunkt neben dem Element "background-color:" ein. Um den Hintergrund deiner Seite bspw. in rosa darzustellen, würdest dein Code so aussehen:
       body 
       { 
       background-color 
       : 
       #d24dff 
       ; 
       } 
      
  4. Jetzt sollte der Header deiner HTML-Datei so aussehen:
       <! 
       DOCTYPE 
       html 
       > 
       < 
       html 
       > 
       < 
       head 
       > 
       < 
       style 
       > 
       body 
       { 
       background-color 
       : 
       #d24dff 
       } 
       </ 
       style 
       > 
       </ 
       head 
       > 
       </ 
       html 
       > 
      
  5. Genauso wie beim body Element kannst du mit "background-color" die Hintergründe anderer Elemente wie bspw. Überschriften, Absätzen etc. definieren. Um bspw. einer Hauptüberschrift (<h1>) oder einem Abschnitt (<p>) eine Hintergrundfarbe zu verleihen, würdest du einen Code in der Art haben: [2]
       <! 
       DOCTYPE 
       html 
       > 
       < 
       html 
       > 
       < 
       head 
       > 
       < 
       style 
       > 
       body 
       { 
       background-color 
       : 
       #93B874 
       ; 
       } 
       h1 
       { 
       background-color 
       : 
       #00b33c 
       ; 
       } 
       p 
       { 
       background-color 
       : 
       #FFFFFF 
       ); 
       } 
       </ 
       style 
       > 
       </ 
       head 
       > 
       < 
       body 
       > 
       < 
       h1 
       > 
       Überschrift 
       mit 
       grünem 
       Hintergrund 
       </ 
       h1 
       > 
       < 
       p 
       > 
       Absatz 
       mit 
       weißem 
       Hintergrund 
       </ 
       p 
       > 
       </ 
       body 
       > 
       </ 
       html 
       > 
      
    Werbeanzeige
Methode 3
Methode 3 von 4:

Einen Farbverlauf als Hintergrund erstellen

PDF herunterladen
  1. Du solltest ihn ziemlich weit oben im Code finden.
  2. Bei der Erstellung eines Farbverlaufs (auch Gradient genannt) brauchst du zwei Informationen: Den Anfangspunkt/Winkel und die Farben, zwischen denen der Gradient verlaufen soll. Du kannst mehrere Farben auswählen, um den Gradienten zwischen ihnen allen verlaufen zu lassen, und du kannst eine Richtung oder einen Winkel für den Farbverlauf einstellen. [3]
       background 
       : 
       linear-gradient 
       ( 
       direction 
       / 
       angle 
       , 
       color1 
       , 
       color2 
       , 
       color3 
       , 
       etc 
       .); 
      
  3. Wenn du die Richtung nicht angibst, verläuft der Farbverlauf von oben nach unten. Um deinen Farbverlauf zu erstellen, füge den folgenden Code zwischen den <style></style> Tags ein:
       html 
       { 
       min-height 
       : 
       100 
       % 
       ; 
       } 
       body 
       { 
       background 
       : 
       -webkit- 
       linear-gradient 
       ( 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background 
       : 
       -o- 
       linear-gradient 
       ( 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background 
       : 
       -moz- 
       linear-gradient 
       ( 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background 
       : 
       linear-gradient 
       ( 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background-color 
       : 
       #93B874 
       ; 
       } 
      
    • Verschiedene Browser haben verschiedene Implementierungen der Gradientenfunktion, daher musst du verschiedene Versionen des Codes einfügen.
  4. Wenn du lieber einen Farbverlauf hast, der nicht streng vertikal verläuft, kannst du ihm eine Richtung geben, um die Art zu verändern, wie der Farbwechsel auftritt. Tippe dafür das Folgende zwischen die <style></style> Tags ein: [4]
       html 
       { 
       min-height 
       : 
       100 
       % 
       ; 
       } 
       body 
       { 
       background 
       : 
       -webkit- 
       linear-gradient 
       ( 
       left 
       , 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background 
       : 
       -o- 
       linear-gradient 
       ( 
       right 
       , 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background 
       : 
       -moz- 
       linear-gradient 
       ( 
       right 
       , 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background 
       : 
       linear-gradient 
       ( 
       to 
       right 
       , 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background-color 
       : 
       #93B874 
       ; 
       } 
      
    • Du kannst mit den Tags "left" und "right" herumspielen, um mit verschiedenen Richtungen für deinen Farbverlauf zu experimentieren.
  5. Es gibt viel mehr, das du mit Gradienten machen kannst.
    • Du kannst bspw. nicht nur mehr als zwei Farben hinzufügen, sondern du kannst auch nach jeder Farbe eine Prozentzahl eingeben. So kannst du angeben, wie viel Platz die einzelnen Farbsegmente haben sollen. Hier ist ein Beispiel-Farbverlauf mit diesem Prinzip:
       background 
       : 
       linear-gradient 
       ( 
       # 
       93B874 
       10 
       %, 
       # 
       C9DCB9 
       70 
       %, 
       # 
       000000 
       90 
       %); 
      
  6. 6
    Verleihe deinen Farben Transparenz. Dies lässt die Farbe verblassen. Verwende die gleiche Farbe, um von der Farbe auf nichts zu verblassen. Du musst die Funktion rgba() nutzen, um die Farbe zu definieren. Der Endwert bestimmt die Transparenz: 0 für durchgehend und 1 für transparent.
       background 
       : 
       linear-gradient 
       ( 
       to 
       right 
       , 
       rgba 
       ( 
       147 
       , 
       184 
       , 
       116 
       , 
       0 
       ), 
       rgba 
       ( 
       147 
       , 
       184 
       , 
       116 
       , 
       1 
       )); 
      
  7. Der Code, um einen Farbverlauf als Hintergrund für deine Webseite zu erzeugen, sieht etwa so aus:
       <! 
       DOCTYPE 
       html 
       > 
       < 
       html 
       > 
       < 
       head 
       > 
       < 
       style 
       > 
       html 
       { 
       min-height 
       : 
       100 
       % 
       ; 
       } 
       body 
       { 
       background 
       : 
       -webkit- 
       linear-gradient 
       ( 
       left 
       , 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background 
       : 
       -o- 
       linear-gradient 
       ( 
       right 
       , 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background 
       : 
       -moz- 
       linear-gradient 
       ( 
       right 
       , 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background 
       : 
       linear-gradient 
       ( 
       to 
       right 
       , 
       #93B874 
       , 
       #C9DCB9 
       ); 
       background-color 
       : 
       #93B874 
       ; 
       } 
       </ 
       style 
       > 
       </ 
       head 
       > 
       < 
       body 
       > 
       </ 
       body 
       > 
       </ 
       html 
       > 
      
    Werbeanzeige
Methode 4
Methode 4 von 4:

Einen sich ändernden Hintergrund erstellen

PDF herunterladen
  1. Er sollte irgendwo oben auf der Seite stehen.
  2. Tippe dies in den Platz unter "body {" und über der schließenden Klammer ein: [5]
       -webkit-animation 
       : 
       colorchange 
       60s 
       infinite 
       ; 
       animation 
       : 
       colorchange 
       60s 
       infinite 
       ; 
      
    • Die oberste Zeile des Texts ist für Chromium-basierte Browser, während die untere Textzeile für andere Browser ist.
  3. Jetzt wirst du die @keyframes Regel nutzen, um die Hintergrundfarben festzulegen, durch die du wechseln wirst, sowie die Dauer, die jede Farbe auf der Seite angezeigt wird. Auch hier musst du die Einträge für die verschiedenen Browser-Sets trennen. Gib die folgenden Zeilen Code unter der schließenden "body" Klammer ein: [6]
       @ 
       -webkit-keyframes 
       colorchange 
       { 
       0 
       % 
       { 
       background 
       : 
       #33FFF3 
       ;} 
       25 
       % 
       { 
       background 
       : 
       #78281F 
       ;} 
       50 
       % 
       { 
       background 
       : 
       #117A65 
       ;} 
       75 
       % 
       { 
       background 
       : 
       #DC7633 
       ;} 
       100 
       % 
       { 
       background 
       : 
       #9B59B6 
       ;} 
       } 
       @ 
       keyframes 
       colorchange 
       { 
       0 
       % 
       { 
       background 
       : 
       #33FFF3 
       ;} 
       25 
       % 
       { 
       background 
       : 
       #78281F 
       ;} 
       50 
       % 
       { 
       background 
       : 
       #117A65 
       ;} 
       75 
       % 
       { 
       background 
       : 
       #DC7633 
       ;} 
       100 
       % 
       { 
       background 
       : 
       #9B59B6 
       ;} 
       } 
      
    • Beachte, dass die beiden Regeln ( @-webkit-keyframes und @keyframes die gleichen Hintergrundfarben und Prozentzahlen haben. Diese sollten einheitlich bleiben, damit das Erlebnis auf allen Browsern gleich ist.
    • Die Prozentzahlen ( 0% , 25% etc.) beziehen sich auf die gesamte Animationsdauer ( 60s ). Wenn die Seite geladen wird, ist der Hintergrund die bei 0% eingestellte Farbe ( #33FFF3 ). Sobald die Animation 25 % von 60 Sekunden abgespielt hat, wechselt der Hintergrund auf #7821F und so weiter.
    • Du kannst die Zeiten und Farben nach deinen Wünschen ändern.
  4. Dein gesamter Code zum Ändern der Hintergrundfarbe sollte in etwa so aussehen:
       <! 
       DOCTYPE 
       html 
       > 
       < 
       html 
       > 
       < 
       head 
       > 
       < 
       style 
       > 
       body 
       { 
       -webkit- 
       animation 
       : 
       colorchange 
       60 
       s 
       infinite 
       ; 
       animation 
       : 
       colorchange 
       60 
       s 
       infinite 
       ; 
       } 
       @ 
       -webkit-keyframes 
       colorchange 
       { 
       0 
       % 
       { 
       background 
       : 
       #33FFF3 
       ;} 
       25 
       % 
       { 
       background 
       : 
       #78281F 
       ;} 
       50 
       % 
       { 
       background 
       : 
       #117A65 
       ;} 
       75 
       % 
       { 
       background 
       : 
       #DC7633 
       ;} 
       100 
       % 
       { 
       background 
       : 
       #9B59B6 
       ;} 
       } 
       @ 
       keyframes 
       colorchange 
       { 
       0 
       % 
       { 
       background 
       : 
       #33FFF3 
       ;} 
       25 
       % 
       { 
       background 
       : 
       #78281F 
       ;} 
       50 
       % 
       { 
       background 
       : 
       #117A65 
       ;} 
       75 
       % 
       { 
       background 
       : 
       #DC7633 
       ;} 
       100 
       % 
       { 
       background 
       : 
       #9B59B6 
       ;} 
       } 
       </ 
       style 
       > 
       </ 
       head 
       > 
       < 
       body 
       > 
       </ 
       body 
       > 
       </ 
       html 
       > 
      
    Werbeanzeige

Tipps

  • Wenn du einfache Farben in deinem HTML-Code verwenden möchtest, kannst du die Farbnamen ohne das Rautezeichen eingeben, statt einen HTML-Farbcode zu verwenden. Um bspw. einen orangefarbenen Hintergrund zu erstellen, würdest du background-color: orange; eingeben.
  • Du kannst mit HTML auch ein Bild als Hintergrund einer Webseite angeben .
Werbeanzeige

Warnungen

  • Teste alle Änderungen an deiner Webseite, bevor du sie online veröffentlichst.
Werbeanzeige

Über dieses wikiHow

Diese Seite wurde bisher 76.170 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige