In CSS4You sind links im Menü die CSS-Eigenschaften beschrieben. Will man Informationen zu einer bestimmten Eigenschaft erhalten, klickt man unter Übersichten auf Eigenschaften A-Z. Dort befindet sich eine alphabetisch sortierte Liste der Eigenschaften.
Zum Erlernen ist es jedoch besser, Eigenschaften die zusammengehören, gleichzeitig zu erlernen. Dafür gibt es unter Eigenschaften eigene Gruppenbezeichnungen wie Schrift, Text usw.die aber mit den Kategorien in den Webeditoren nicht übereinstimmen.

Hintergrund

Hintergrundfarbe: background-color
(Online-Link: CSS 4 You: Eigenschaften > Farben > background-color)

Background-color legt für Elemente wie Tabellen, Überschriften, Absätze aber auch ganze Seiten (mit Selektor body) die Hintergrundfarbe fest. Standardwert (Initialwert), wenn man nichts anderes angibt, ist transparent, das heißt, der Benutzer sieht das darunterliegende durch.

http://www.w3.org/TR/css-color-3/#colorunits

Die Hintergrundfarbe erstreckt sich über den Bereich des Inhalts, den Bereich des Innenabstands und auch den Bereich des Rahmens. Das heißt, wenn der Rahmen Zwischenräume aufweist, also bei punktiert (dotted), strichliert (dashed) und doppelt (double), scheint dort die Hintergrundfarbe durch.

Beispiele

Ein Absatz mit einer gelben Hintergrundfarbe, der Innenabstand ist 0:

p {background-color: #FFFF66; padding: 0;}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Ein Absatz mit einer gelben Hintergrundfarbe, der Innenabstand ist 20 Pixel groß:

p {background-color: #FFFF66; padding: 20px;}

Ein Absatz mit einer gelben Hintergrundfarbe und einen roten Rahmen ohne Zwischenräume, der Innenabstand ist 20 Pixel groß:

p {background-color: #FFFF66; border: solid 3px #CC0033;
   padding: 20px;}

Ein Absatz mit einer gelben Hintergrundfarbe und einen roten Rahmen in verschiedenen Formatierungen die Zwischenräume aufweisen, der Innenabstand ist 20 Pixel groß:

p {
   background-color: #FFFF66; 
   border-style: dotted dashed double none; 
   border-width: 9px; 
   border-color: #CC0033;
   padding: 20px;
}

Falls man Farben verwendent, sollten diese in der Regel eher dezent sein. Auch ist es üblich, den Seitenhintergrund nicht weiß, sondern in leichten Pastelltönen zu färben, da dies für das Auge angenehmer ist.

Beispiel für eine dezente Hintergrundfarben:

links oben	rechts oben
links mitte	rechts mitte
links unten	rechts unten

Hintergrund: #FFFFF7
Tabellenkopf: #E0E0FF
Tabelle: #F0F0FF

Hintergrundbild: background-image
(Online-Link: CSS 4 You: Eigenschaften > Hintergrundbilder > background-image)

Mit CSS kann man allen Elementen ein Hintergrundbild geben. So kann man Tabellen genauso verzieren wie Überschriften.

Ich bin eine so hübsche Überschrift!

Ölförderung	USA	Rußland	Venezuela
2000	1.5 Mil Barrel	3.4 Mil Barrel	0.6 Mil Barrel
2001	1.4 Mil Barrel	3.6 Mil Barrel	0.5 Mil Barrel
2002	1.5 Mil Barrel	3.5 Mil Barrel	0.5 Mil Barrel
2003	1.6 Mil Barrel	3.2 Mil Barrel	0.6 Mil Barrel
2004	1.8 Mil Barrel	3.6 Mil Barrel	0.5 Mil Barrel
2005	1.7 Mil Barrel	3.8 Mil Barrel	0.7 Mil Barrel

Die Hintergrundbilder erstreckt sich über den Bereich des Inhalts, den Bereich des Innenabstands und auch den Bereich des Rahmens. Das heißt, wenn der Rahmen Zwischenräume aufweist, also bei punktiert (dotted), strichliert (dashed) und doppelt (double), scheint dort das Hintergrundbild durch.

Außerhalb dieses Bereichs werden die Bilder "abgeschnitten", falls sie über diese Grenze hinausreichen. Der Bereich des Außenabstands (margin) ist immer transparent.

Hintergrundbilder werden standardmäßig in alle Richtungen wiederholt. Wenn man die Eigenschaft abschaltet, dann beginnen die Hintergrundbilder standardmäßig im linken oberen Eck des Innenabstands - und dann ist das Hintergrundbild oben und links nicht in den Zwischenräumen des Rahmens, und wenn das Bild kleiner ist als die Box, dann enden sie vorher und der Rest ist transparent oder die Hintergrundfarbe kommt durch.

Beispiele

Ein Absatz mit einem Hintergrundbild, der Innenabstand ist 0:

p {
   background-image: url(bg_blumen.jpg);
   padding: 0;
}

Ein Absatz mit einem Hintergrundbild, der Innenabstand ist 20 Pixel groß:

p {
   background-image: url(bg_blumen.jpg);
   padding: 20px;
}

Ein Absatz mit einem Hintergrundbild und einen grünen Rahmen ohne Zwischenräume, der Innenabstand ist 20 Pixel groß:

p {
   background-image: url(bg_blumen.jpg);
   border: solid 3px #669900;
   padding: 20px;
}

Ein Absatz mit einem Hintergrundbild und einen grünen Rahmen in verschiedenen Formatierungen die Zwischenräume aufweisen, der Innenabstand ist 20 Pixel groß:

p {
   background-image: url(bg_blumen.jpg); 
   border-style: dotted dashed double none; 
   border-width: 9px; 
   border-color: #669900;
   padding: 20px;
}

Ein Absatz mit einem Hintergrundbild, das nicht wiederholt wird, und einen grünen Rahmen in verschiedenen Formatierungen die Zwischenräume aufweisen, der Innenabstand ist 20 Pixel groß:

p {
   background-image: url(bg_blumen.jpg);
   background-repeat: no-repeat; 
   border-style: dotted dashed double none; 
   border-width: 9px; 
   border-color: #669900;
   padding: 20px;
}

Ein Absatz mit einem Hintergrundbild, das nicht wiederholt wird aber mit einer passenden Hintergrundfarbe, und einen grünen Rahmen in verschiedenen Formatierungen die Zwischenräume aufweisen, der Innenabstand ist 20 Pixel groß:

p {
   background-image: url(bg_blumen.jpg);
   background-repeat: no-repeat;
   background-color: #E1B173; 
   border-style: dotted dashed double none; 
   border-width: 9px; 
   border-color: #669900;
   padding: 20px;
}

Hintergrundbild wiederholen: background-repeat
(Online-Link: CSS 4 You: Eigenschaften > Hintergrundbilder > background-repeat)

Man kann deklarieren, ob Hintergrundbilder nur einmal angezeigt werden sollen oder ob sie wiederholt werden sollen. Standardmäßig werden Hintergrundbilder in alle Richtungen wiederholt (background-repeat: repeat;). Man kann auch deklarieren, dass das Hintergrundbild nur waagrecht auf der mathematischen x-Achse (background-repeat: repeat-x;) oder nur senkrecht auf der mathematischen y-Achse (background-repeat: repeat-y;). Natürlich kann auch deklariert werden, dass das Hintergrundbild nur einmal angezeigt, also nicht wiederholt wird (background-repeat: no-repeat;).

no-repeat	repeat
repeat-x	repeat-y

Wenn Hintergrundbilder nur einmal angezeigt werden, muss man darauf achten, dass sie "freigestellt" sind (der Rand hat die selbe Farbe wie der dahinterligende Hintergrund, womit die Figur auf dem Hintergrundbild wie ausgeschnitten aussieht) oder genau in das HTML-Element passt. Dies funktioniert nur, wenn die Größe des HTML-Elements fix und genau bekannt ist.

Hintergrundbilder lassen sich auch so erstellen, dass ihre gegenüberliegenden Ränder wieder ineinander übergehen und so beim Wiederholen wie Kacheln ein großes Bild ergeben.

Das Bild.

Das Bild wiederholt.

fehlt

Heiße Sache?

So ein Hintergrund macht schon was her. Aber ob es professionell aussieht? Da braucht man schon etwas Gefühl, um das so hin zu bekommen, dass es wirklich gut aussieht.

Lauwarme Sache!

So ein Hintergrund macht schon was her. Aber er ist kopiert und nicht selbst gemacht. Aber es gibt einige Websites, die voll von solchen Angeboten sind. Dieser Hintergrund hat links die Flammen und nach rechts hin ist er schwarz. Außerdem ist er so breit, sodass er breiter ist als jeder (gewöhnliche) Bildschirm. Nach unten hin ist er wiederholt. Wenn man genau schaut, merkt man es an der Flamme.

Hintergrundbild fixieren: background-attachment
(Online-Link: CSS 4 You: Eigenschaften > Hintergrundbilder > background-attachment)

Ein Hintergrundbild wird standardmäßig mit dem Text mitgerollt (scroll) wenn man scrollt. Es kann aber auch das Hintergrundbild fixiert werden, es bleibt dann an der selben Position wenn man scrollt.

Beispiel

background-attachment: scroll; background-attachment: fixed;

Dies ist aber in der Praxis nur für den gesamten Bildschirm sinnvoll, also für das Element body, da sich das Bild kaum positionieren lässt, da sich die Position auf das Browserfenster bezieht.

Hintergrundbild positionieren: background-position
(Online-Link: CSS 4 You: Eigenschaften > Hintergrundbilder > background-position)

In der Regel werden zwei Werte für die Position angegeben. Gemessen wird von der Außenkante des Innenabstandbereichs (padding). Es können Schlüsselwörter oder Längen bzw. Prozentwerte angegeben werden. Bei Längen- und Prozentangaben wird vom linken oberen Eckpunkt aus gemessen. Der erste angegebene Wert gibt die waagrechte Position an (x-Achse), wobei positive Werte nach rechts gemessen werden und negative nach links. Der zweite angegebene Wert gibt die senkrechte Position an (y-Achse), wobei positive Werte nach unten gemessen werden und negative nach oben.

Als Schlüsselwörter können für die waagrechte Ausrichtung left, center und right bzw. für die senkrechte Ausrichtung top, center und bottom verwendet werden. Da die Zuordnung zu waagreicht und senkrecht eindeutig ist, ist hierbei - und nur hier - die Reihenfolge der Schlüsselwörter egal.

Werden nummerische Werte angegeben, so wird standardmäßig vom linken oberen Eckpunkt aus nach rechts und unten gemessen. Die errechnete Position ist dann der linke obere Eckpunkte des Hintergrundbildes. Bei negativen Werten kann dieser durchaus auch außerhalb der Box liegen wodurch das Hintergrundbild nach außen verschoben wird und dadurch abgeschnitten wird.

Werden Prozentwerte angegeben, so entsprechen diese der "Verschiebung" von links oben nach rechts unten. Bei 0% 0% wird das Hintergrundbild in der linken oberen Ecke platziert, bei 100% 100% in der rechten unteren Ecke. Bei Werten dazwischen wird das Hintergrundbild um diesen Wert verschoben: So wird z.B. bei 25% als erstem Wert das Hintergrundbild um 25% des möglichen Weges (der freie Raum, um den das Hintergrundbild kleiner ist als der besseren Begriff suchen sichtbaren Bereich) nach rechts verschoben; es ist daher links vom Hintergrundbild 25% des zuvor freien Platzes und rechts die restlichen 75%.
Der freie Raum auf den sich die Prozentangaben beziehen, ist mathematisch gesehen die Differenz von dem zur Verfügung stehenden Platz in der Box (Außenkante des Innenabstands padding) und der Größe des Hintergrundbildes.
Etwas komplizierter zu rechnen wird es, wenn Prozentwerte größer als 100% oder kleiner als 0% angegeben werden, aber auch wenn das Hintergrundbild größer ist als der besseren Begriff suchen sichtbare Bereich. Hier wird mathematisch korrekt berechnet, die Position ist:
("Platz in der Box" − "Größe des Hintergrundbildes") × Prozentwert
gemessen vom Referenzpunkt. Solche Angaben sind in der Praxis eher selten sinnvoll.

Das Mischen von Längenangaben mit Prozentangaben kann bei einigen älteren Browser zu Problemen führen und sollte daher vermieden oder getestet werden.

Wird kein Wert deklariert, so ist der Defaultwert (Initialwert) 0% 0%, das Hintergrundbild wird in der linken oberen Ecke platziert.
Wird nur ein Wert angegeben, so gilt dieser im Allgemeinen für die x-Achse, der Wert für die y-Achse ist dann nicht 0% sondern center, also mittig. Ist jedoch der Wert ein Schlüsselwort, das eindeutig der y-Achse zugeordnet ist (top oder bottom), so ist der Wert für die x-Achse center, also mittig.

Bei der Benutzung der Assistenten eines Webeditors sollten immer beide Werte angegeben werden, da es sonst zu Zuordnungsproblemen kommen kann. Dies gilt nicht, wenn die Werte im Quellcode eingegeben werden.

Todo

If three or four values are given, then each <percentage> or<length> represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. For example, ‘background-position: bottom 10px right 20px’ represents a ‘10px’ vertical offset up from the bottom edge and a ‘20px’ horizontal offset leftward from the right edge. If three values are given, the missing offset is assumed to be zero.

Positive values represent an offset inward from the edge of the background positioning area. Negative values represent an offset outward from the edge of the background positioning area.

http://dev.w3.org/csswg/css-backgrounds/#background-position

Beispiele

Defaultwerte

Keine Angabe der Position, daher die Defaultwerte (Initialwerte) 0% 0%, also links oben ausgerichtet: