Hintergrundfarbe

====== Farben, Hintergrundfarben und Hintergrundbilder ====== ===== Farben ===== Jedem Element kann eine Farbe zugewiesen werden. Hier ist damit die Vordergrundfarbe, also z.B. die Farbe vom Text selbst gemeint. Die zuständige Eigenschaft ist **color:** und sie nimmt Farben im HEX-Format oder als Wort an. ===== Hintergrundfarben ===== Man kann mit CSS Hintergrundfarben für alle (X)HTML-Elemente vergeben, also sowohl eine Farbe für die gesamte Seite als auch nur für einen bestimmten Text, eine Tabellenzeile, etc. Die Eigenschaft für die Hintergrundfarbe ist dabei immer **background-color:**, als Wert wird eine Farbe entweder im HEX-Format oder als Wort (green, ...) angenommen. ++++ (X)HTML-Beispielcode anzeigen |





Hintergrundfarbe




Hintergrundfarbe
Das ist ein Absatz mit Text. Er hat eine eigene Hintergrundfarbe. Das ist ein Absatz mit Text. Er hat eine eigene Hintergrundfarbe. Das ist ein Absatz mit Text. Er hat eine eigene Hintergrundfarbe. Das ist ein Absatz mit Text. Er hat eine eigene Hintergrundfarbe. Das ist ein Absatz mit Text. Er hat eine eigene Hintergrundfarbe. Das ist ein Absatz mit Text. Er hat eine eigene Hintergrundfarbe. Das ist ein Absatz mit Text. Er hat eine eigene Hintergrundfarbe.

++++ ++++ Dazu gehörenden CSS-Beispielcode anzeigen |


body {
   background-color: #FFFF99;
}
 
h1 {
   font-size: 1.7em;
}
 
p#text {
   background-color: darkgreen;
   color: white;
}

++++ ===== Hintergrundbilder ===== Ebenso können für alle Elemente Hintergrundbilder vergeben werden. Die Eigenschaft dazu lautet **background-image:**, als Wert wird ein Link zu einem Bild angenommen: **url(./images/hintergrundbild.png)** Zwei weitere wichtige Eigenschaften für Hintergrundbilder gibt es: * **background-repeat:** Legt fest, ob und in welche Richtung das Hintergrundbild wiederholt werden soll. Mögliche Werte sind no-repeat, repeat (in alle Richtungen wiederholen), repeat-x (horizontal wiederholen), repeat-y (vertical wiederholen). Am sinnvollsten ist hier bei einem von oben nach unten gehenden Farbverlauf repeat-x; bei einem von links nach rechts gehendem Farbverlauf repeat-y; bei einem Hintergrundbild mit einem Muster repeat. * **background-attachment:** Damit bestimmt man, ob das Hintergrundbild mit der Seite mitscrollen soll (Wert scroll) oder fixiert an seinem Platz stehen soll (Wert fixed) * **backgtround-position:** Legt die Position des Hintergrundbildes fest, je nach der background-repeat Angabe. Genauere Informationen [[http://www.css4you.de/background-position.html|hier]] Es gibt noch weitere Eigenschaften, um Hintergrundbilder noch genauer steuern zu können, diese sind unter [[http://www.css4you.de/backgroundproperty.html|http://www.css4you.de/backgroundproperty.html]] zu finden. Hinweis: Einen Farbverlauf kann man sich entweder mit Bildbearbeitungprogrammen wie Photoshop oder mit Farbverlaufs-Generatoren im Internet (z.B. http://www.generateit.net/gradient ) erstellen. **Beispiel:**



 

   
   
   
   TITEL
 



Das ist der Inhalt der DIV-Box

Farbverlaufs-PNG: {{:inf:inf7b_201011:css:farbverlauf.png|}} ===== Links ===== [[http://www.css4you.de/backgroundproperty.html|CSS4You: Eigenschaften zu Hintergrundbildern]] [[http://www.css4you.de/refcolorword.html|CSS4You: Verfügbare Farbnamen]] [[http://www.css4you.de/refcolor216.html|CSS4You: Übersicht von websicheren Farben (in HEX-Codes)]] [[http://www.css4you.de/refcolorsys.html|CSS4You: Systemfarben]]