PDF herunterladen
PDF herunterladen
In diesem wikiHow zeigen wir dir, wie du die Hintergrundfarbe einer Webseite änderst, indem du ihren HTML-Code bearbeitest.
Vorgehensweise
-
Bestimme die gewünschte Hintergrundfarbe. 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:
- Gehe im Browser auf https://www.w3schools.com/colors/colors_picker.asp .
- Klicke im Bereich "Farbe auswählen" auf eine Grundfarbe.
- Wähle rechts auf der Seite eine Nuance.
- Schreibe dir den numerischen Code rechts neben der Nuance auf.
-
Öffne deine HTML-Datei in deinem bevorzugten Texteditor. 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] X Forschungsquelle
- Du kannst auf einem PC Notepad++ oder Notepad nutzen, auf einem Mac TextEdit oder BBEdit.
-
Füge den "html" Header in dein Dokument ein. 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 >
-
Erstelle zwischen den "style" Tags eine neue Zeile. Du solltest eine Zeile haben, auf der du unter dem
<style>Tag und über dem</style>Tag Informationen eingeben kannst. -
Füge das "body" Element ein. Tippe dies zwischen die Tags
<style></style>ein:- Alles, was du im "body" Element in CSS angibst, beeinflusst die gesamte Seite.
- Überspringe diesen Schritt, wenn du einen Farbverlauf erstellen möchtest .
body { }
Werbeanzeige
-
Finde den "html" Header in deinem Dokument. Normalerweise sollte er relativ weit oben stehen.
-
Füge dem Element "body" die Eigenschaft "background-color" hinzu. Tippe zwischen die body-Klammern
background-color:ein. Du solltest jetzt das folgende "body" Element haben:- In diesem Kontext funktioniert nur eine Schreibweise von "color". Du kannst hier nicht "colour" schreiben.
body { background-color : }
-
Füge die gewünschte Hintergrundfarbe in die Eigenschaft "background-color" ein. 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 ; }
-
Sieh dir deine "style" Informationen an. Jetzt sollte der Header deiner HTML-Datei so aussehen:
<! DOCTYPE html > < html > < head > < style > body { background-color : #d24dff } </ style > </ head > </ html >
-
Wende mit "background-color" eine Hintergrundfarbe auf andere Elemente an. 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] X Forschungsquelle
<! 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
-
Finde den "html" Header in deinem Dokument. Du solltest ihn ziemlich weit oben im Code finden.
-
Verstehe die grundlegende Syntax dieses Prozesses. 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] X Forschungsquelle
background : linear-gradient ( direction / angle , color1 , color2 , color3 , etc .);
-
Erstelle einen vertikalen Farbverlauf. 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:- Verschiedene Browser haben verschiedene Implementierungen der Gradientenfunktion, daher musst du verschiedene Versionen des Codes einfügen.
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 ; }
-
Erstelle einen gerichteten Farbverlauf. 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] X Forschungsquelle- Du kannst mit den Tags "left" und "right" herumspielen, um mit verschiedenen Richtungen für deinen Farbverlauf zu experimentieren.
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 ; }
-
Verwende andere Eigenschaften, um den Farbverlauf anzupassen. 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 %);
- 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:
-
6Verleihe 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 ));
-
Sieh dir den fertigen Code an. 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
-
Finde den html Header in deinem Code. Er sollte irgendwo oben auf der Seite stehen.
-
Füge die Animationseigenschaft ins "body" Element ein. Tippe dies in den Platz unter "body {" und über der schließenden Klammer ein: [5] X Forschungsquelle
- Die oberste Zeile des Texts ist für Chromium-basierte Browser, während die untere Textzeile für andere Browser ist.
-webkit-animation : colorchange 60s infinite ; animation : colorchange 60s infinite ;
-
Füge der Animation deine Farben hinzu. 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] X Forschungsquelle
- 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.
@ -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 ;} }
-
Sieh dir deinen Code an. 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
Referenzen
- ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
- ↑ http://www.w3schools.com/css/css_background.asp
- ↑ https://css-tricks.com/css3-gradients/
- ↑ http://www.w3schools.com/css/css3_gradients.asp
- ↑ https://codepen.io/metagrapher/pen/tgcLl
- ↑ http://www.w3schools.com/css/css3_animations.asp
Werbeanzeige
Melde dich für den kostenlosen wikiHow Newsletter an!
Du erhältst hilfreiche Tipps und Anleitungen jede Woche direkt in deine Inbox.
Registriere mich!
