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.

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Hintergrundfarbe</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Hintergrundfarbe</h1>
<p id="text">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.</p>
 
</body>
</html>

Dazu gehörenden CSS-Beispielcode anzeigen

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

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 hier

Es gibt noch weitere Eigenschaften, um Hintergrundbilder noch genauer steuern zu können, diese sind unter 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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="content-language" content="de" />
   <title>TITEL</title>
 
<style type="text/css">
/* <![CDATA[ */
body {
	background-image: url(farbverlauf.png);  /* alternative: muster */
	background-color: white;
	background-repeat: repeat-x;  /* alternativen: repeat, repeat-y, no-repeat */
	/*background-attachment: fixed  */  /* auskommentieren um Wirkung zu sehen! */
        /*background-position: 15px 25px */  /* auskommentieren um Wirkung zu sehen! */
}
 
div#beispiel_div {
	height: 900px;
	background-color: white;
	border: black solid 3px;#
	border-radius: 10px;
	width: 400px;
	margin: 100px;
}
 
/* ]]> */
</style>
</head>
<body>
<div id="beispiel_div">Das ist der Inhalt der DIV-Box</div>
</body>
</html>

Farbverlaufs-PNG:

CSS4You: Eigenschaften zu Hintergrundbildern

CSS4You: Verfügbare Farbnamen

CSS4You: Übersicht von websicheren Farben (in HEX-Codes)

CSS4You: Systemfarben

Farben, Hintergrundfarben und Hintergrundbilder

Farben

Hintergrundfarben

Hintergrundbilder

Links