Hintergründe

Mit den CSS3 Eigenschaften für Hintergründe lassen sich viele interessante Effekte erzielen.

Hintergrundfarben und Hintergrundbilder kann man fast jedem Element zuweisen. Es sind Bilder die gekachelt, aneinandergereiht werden können. Mit CSS3 kann man die Richtung sowie die Größe und Position des Hintergrunds bestimmen. Außerdem kann man mehrere Hintergründe zuweisen.

Download Design Hintergründe www.toptal.com

Die CSS Eigenschaften für Hintergründe sind:

Hintergrund Farbe

Das einfachste ist, dem Hintergrund eine Farbe zu verleihen.

background-color: #fa0;

Hier ist jeder gültige Farbwert erlaubt, auch Farben mit Transparenz. Diese lassen sich einsetzen, wenn man eine Hintergrundfarbe über einem anderem Hintergrund definiert.

so sieht`s aus

Ein Farbverlauf als Hintergrund wird nicht der Eigenschaft background-color zugewiesen, sondern background-image oder mit der Kurzschreibweise background.

Hintergrundgrafik

backround-image

Neben der Möglichkeit eine Farbe für den Hintergrund festzulegen kann man auch ein Hintergrundbild bestimmen. Den Pfad zur Grafik gibt man in den runden Klammern hinter url an.

background-image: url(Wert)

.back1 {background-image: url(img/texKroko.jpg);}

Der Eigenschaft background-image kann man auch einen Farbverlauf zuweisen. Siehe dazu auch das Thema Farben und Effekte

Ein einfarbiges Hintergrundbild mittels eine Verlaufs:

background-image: linear-gradient(180deg,#C19933 0%, #C19933 100%);

Der Vorteil einer derart definierten Farbe liegt darin, dass man nun die Möglichkeit hat die Größe des "Hintergrundbildes" zu bestimmen und somit auch zu animieren.
so sieht's aus

background-image
Eigenschaft Wert Bedeutung
Standardwert none
Vererbbar nein
Anwendbar Alle Elemente
background-image none kein Hintergrundbild
url() url zum Bild in Klammern
linear-gradient() linearer Farbverlauf siehe unten
radial-gradient() radialer Farbverlauf siehe unten

 

 

 

Hintergrund wiederholen

background-repeat

Diese Eigenschaft macht nur Sinn im Zusammenhang mit background-image, da hier angegeben wird, auf welche Weise das Hintergrundbild gekachelt werden soll.
repeat | no-repeat | repeat-x | repeat-y |

.back2 {background-image:url(bild.jpg); background-repeat: repeat-y;}

background-repeat
Eigenschaft Wert Bedeutung
Standardwert repeat
Vererbbar nein
Anwendbar Alle Elemente
background-repeat repeat vertikale und horizontale Wiederholung
repeat-x horizontale Wiederholung
repeat-y vertikale Wiederholung
no-repeat keine Wiederholung

background-clip Bereich definieren

Mittels background-clip kann man bestimmen, ob der Hintergrund nur innerhalb des Inhaltsbereichs, des paddings- oder border-Bereiches erscheint.

background-clip: border-box

background-clip
Eigenschaft Wert Bedeutung
Standardwert border-box
Vererbbar nein
Anwendbar Alle Elemente
background-clip border-box bis zum Rand
padding-box bis padding
content-box nur Inhaltsbereich
initial  

background-origin

Die background-originEigenschaft gibt die Ursprungsposition (Hintergrundpositionierungsbereich) eines Hintergrundbilds an. Es wird hiermsit die linke obere Ecke bestimmt, wo das Hintergrundbild startet. Den Unterschied zu background-clip sieht man wenn sich das Hintergrundbild wiederholt.

Hinweis: Diese Eigenschaft hat keine Auswirkungen, auf  background-attchement:fixed 

background-clip
Eigenschaft Wert Bedeutung
Standardwert padding-box
Vererbbar nein
Anwendbar Alle Elemente
background-origin border-box ab zum Rand
padding-box ab padding
content-box Inhaltsbereich
initial  

 

siehe w3schools

Beispiel ohne Kachelung Beispiel mit Kachelung

background-position / Hintergrund positionieren

Mit background-position kann man angeben, wo eine Ecke oder Seite der Hintergrundgrafik liegt. Das ist besonders interessant wenn die Grafik gar nicht, oder nur in eine Richtung gekachelt wird. Es werden 2 Werte erwartet, der erste Wert steht für die horizontale der zweite für die vertkale Positionierung.

.back2 {background-image:url(bild.jpg); background-repeat: repeat-y; background-position: top center;}

.back1 {background-position: right top;}

background-position Selfhtml

position-left | position-center-top | position-left-top | position-right-top | repeat-y position-center |

Die vertikale Ausrichtung am body, richtet sich nach der Höhe des body. Die Höhe des body wird normalerweise durch den Inhalt definiert. so sieht's aus

Man kann das Problem lösen, indem man dem body ein tabellenzellenartiges Verhalten mittels der CSS Eigenschaft display zuweist.
so sieht's aus

Eine weitere Möglichkeit besteht darin das Hintergrundbild zu fixieren. Auch ein derart fixiertes Hintergrundbild richtet sich an den Proportionen des Viewports aus.

Numerische Positionierung

Numerisch positionierte Hintergrundbilder sind auch bei Animationen wichtig.
so sieht's aus

background-position
Eigenschaft Wert Bedeutung
Standardwert top left bzw. 0% 0%
Vererbbar nein
Anwendbar Alle Elemente
background-position top vertikale Ausrichtung oben
bottom vertikale Ausrichtung unten
center horizontale oder vertikale Ausrichtung mittig
left horizontale Ausrichtung links
right horizontale Ausrichtung rechts
Längenangabe Maßeinheiten für x und y Achse
Prozentangabe Angaben für x und y Achse in Prozent

Hintergrund festsetzen

background-attachment

Mit dieser Eigenschaft kann man das Hintergrundbild beim Scrollen festsetzen, so dass sich der Text und die übrigen Elemente beim scrollen über das feststehende Hintergrundbild bewegen. Außerdem kann man ein Hintergrundbild auf diese Weise vertikal am Viewport ausrichten.

body {background-attachment: fixed;}

so sieht's aus

so sieht's aus mit center bottom

background-attachment
Eigenschaft Wert Bedeutung
Standardwert scroll
Vererbbar nein
Anwendbar Alle Elemente
background-attachment scroll bewegt sich beim scrollen mit
fixed bleibt stehen wie ein Wasserzeichen

 

Größe der Hintergrundgrafik

background-size

In der Regel sollte man die Grafiken nicht mit CSS oder HTML vergrößern, es gibt jedoch Ausnahmen wenn beispielsweise ein Hintergrundbild genauso groß wie der sichtbare Bereich sein soll.

Es wird zuerst der Wert für die Breite erwartet dann die Höhe.

background-size: 100% auto;

body {
background-image: url(../../img/phoenix__106.jpg);
background-repeat: repeat-y;
background-size: 100% auto;
}

Beispiel Industrie | Beispiele mit Größe und Positionierung

background-size
Eigenschaft Wert Bedeutung
Standardwert auto
Vererbbar nein
Anwendbar Alle Elemente
background-size auto berechneter Wert je nach Breite oder Höhe
cover Das Hintergrundbild wird so groß als möglich im Browserfenster dargestellt. Wenn das Browserfenster ein anderes Seitenverhältnis hat, wird ein Teil des Hintergrundbildes abgeschnitten.
Zahlenwert Maßeinheit z.B. 20em oder 40%

 

Farbverlauf linear-gradient

Siehe dazu w3schools Gradient

Siehe auch diesen Online Farbverlauf Generator.


Mit CSS3 lassen sich auch Farbverläufe definieren. Die Eigenschaft ist background-image, die Wertzuweisung ist linear-gradient() mit Winkel, Farb- und Stopwerten in Klammern. Auch die Kurzschreibweise background: ist möglich.

background-image: linear-gradient(90deg, #fec, #fff, #000, #f0f);

Achtung! Es darf kein Leerzeichen zwischen der Klammer und linear-gradient stehen.

Beispiel

Schreibweise

Der erste Wert ist der Verlaufswinkel 90deg, der Wert deg steht für Grad (engl. Degree). Es folgen weitere Farbwerte mit Komma getrennt. Es müssen mindestens 2 Farbwerte eingegeben werden. Die Farben werden gleichmäßig von Anfang bis Ende verteilt. Es gibt auch die Möglichkeit zu jeder Farbe eine prozentuale Angabe zu notieren, die den Standpunkt der Farbe definiert.

background-image: linear-gradient(90deg, #f00 5%, #ff0 15%,#fff 30%);

Beispiel

Höhe des Background Verlaufs

Achtung! wenn Sie einen Farbverlauf von oben nach unten definieren und Sie haben keinen Inhalt auf der Seite und keine Höhendefinition für den body, so erscheint der Verlauf nur als kleiner Streifen, da die Höhe des body Bereichs durch den Inhalt definiert wird.

so sieht`s aus

Fügt man background-attachment: fixed hinzu verläuft der Verlauf bis zum unteren Rand.

so sieht`s aus

Streifen & Quadrate

Durch geschicktes Setzen der Prozente kann man harte Kanten und somit Streifen erzeugen.

so sieht`s aus

Hier ein Beispiel mit der Kurzform background. Es gibt 2 lineare Verläufe, die abwechselnd eine violette und transparente Farbe erzeugen. Ein Verlauf hat den Winkel 45 Grad, der andere -45 Grad. Außerdem gibt es noch die Hintergrundfarbe gelb. Beachten Sie, dass die Hintergrundfarbe nach den Verläufen aufgeführt werden muss.

so sieht`s aus

Die zuvor vorgestellte Methode ist jedoch etwas aufwändig, da man hier jeden Streifen definieren muss. Es gibt auch die Möglichkeit durch Ändern der Größe des Hintergrundbildes, Streifen zu erzeugen. Durch Ändern der Winkel und Größe entstehen interessante Muster.

so sieht`s aus

Spielen Sie mit den Werten des nächsten Beispiels.

background 7 | background 8 | background 9 | background 10 | background 11 | background 12 | background 13 | background 14

 

streifenInfoUm ein durchgehendes Streifenmuster mit 45 Grad zu erzeugen reicht es nicht aus, 2 Farben zu definieren, die bei 50% ihren Schnittpunkt haben. Das kann man sehr gut im Beispiel background 8 erkennen. Die Wiederholung erzeugt ein Dreiecksmuster.

Im Beispiel background 9 gibt es 4 Farbstreifen, so dass ein durchgehendes Streifenmuster bei 45 Grad entstehen kann, wenn "Bild 9" gekachelt wird. Schauen Sie sich dazu den Quelltext der Beispiele und die nebenstehende Grafik an.

 

Kreisförmiger Farbverlauf radial-gradient

radial-gradientDie Eigenschaft background-image ermöglicht auch einen kreisförmigen oder eliptischen Verlauf. Die Wertzuweisung ist radial-gradient(). Im einfachsten Fall, gibt man Farbe und prozentuale Stopwerte an, welche die Farbpositionen auf dem Radius definieren. Dabei markiert 0% den Mittelpunkt des Verlaufs.

background-image: radial-gradient( #FFDCFA 0%, #A529C0 25%, #003E8A 75% );

so sieht`s aus

Schlüsselwörter

Mit Schlüsselwörtern kann man Eigenschaften des Verlaufs bestimmen: kreisförmig, eliptisch, Position des Mittelpunkts und Ausbreitung des Verlaufs.

circle, ellipse

background-image: radial-gradient(circle, #FFDCFA 0%, #A529C0 25%, #003E8A 75% );

so sieht`s aus

Erklärung:

Der Standardwert ist ellipse. Wenn nicht explizit das Schlüsselwort circle verwendet wird und die Box nicht quadratisch ist, breitet sich der Verlauf ellipsenförmig vom Mittelpunkt der Box aus.

Position

Der Mittelpunkt des Verlaufs lässt sich angeben über das Schlüsselwort center oder man definiert ihn über 2 Werte den horizontalen Abstand von der linken Kante und den vertikalen Abstand von der oberen Kante. Hier sind Prozentuale Wert und Wert in Pixel möglich.

so sieht`s aus

background-image: radial-gradient(circle at center, #FFDCFA 0%, #A529C0 25%, #003E8A 75% );

background-image: radial-gradient(circle at 50% 10%, #FFDCFA 0%, #A529C0 25%, #003E8A 75% );


closest-side, farthest-side

background-image: radial-gradient(circle closest-side at 100px 100px, #FFDCFA 0%, #A529C0 25%, #003E8A 100%, #fff 100%);

so sieht`s aus

background-image: radial-gradient(circle farthest-side at 100px 100px, #FFDCFA 0%, #A529C0 25%, #003E8A 100% , #fff 100%);

so sieht`s aus

Erklärung:

Man gibt 2 Werte für die Position des Mittelpunkts an. Zuerst den horizontalen Abstand, dann den vertikalen Abstand von der linken oberen Ecke aus. Desweiteren geht es darum, wo der Radius des Verlaufs endet.
closest-side bedeutet, der Radius endet an der am nächsten gelegenen Seite vom Mittelpunkt aus gesehen.
farthest-side bedeutet, der Radius endet an der am weitesten entfernten Seite der Box.

closest-side farthest-side
Der schwarze Pfeil markiert den Radius.

closest-corner, farthest-corner

background-image: radial-gradient(circle closest-corner at 100px 100px, #FFDCFA 0%, #A529C0 25%, #003E8A 100% , #fff 100%);

so sieht`s aus

background-image: radial-gradient(circle farthest-corner at 100px 100px, #FFDCFA 0%, #A529C0 25%, #003E8A 100% , #fff 100%);

so sieht`s aus

Erklärung:

Auch hier wird zuerst der Mittelpunkt des Verlaufs durch die beiden Werte bestimmt. Dann wird definiert wo der Radius endet. Bei closest-corner wird vom Mittelpunkt aus eine Linie zur nächst gelegenen Ecke bestimmt. Auf dieser Linie verläuft der Radius des Verlaufs. Bei farthest-corner ist es der am weitesten entfernte Eckpunkt zum Mittelpunkt.

Der schwarze Pfeil markiert den Radius.

background: die Kurzform

Anstatt alle Eigenschaften getrennt aufzuführen ist es möglich, sie in Kurzform zu notieren. Die Werte werden durch ein Leerzeichen voneinander getrennt. Angaben mit einem Leerzeichen im Wert sind in Anführungszeichen zu setzen. Die Reihenfolge der Eigenschaften ist egal. Es ist nicht erforderlich zu allen Angaben etwas zu notieren, allerdings sollten die Angabe, zu position beispielsweise schon in der vorgeschriebenen Reihenfolge notiert sein, zuerst x-horizontal, dann y- vertikal.

background: background-image, background-repeat, background-attachment, background-position, background-size

body {
background: url(img/bild.gif) right top no-repeat fixed;
}

Mehrere Hintergrundbilder

background

Mit der Eigenschaft background ist es möglich mehrere Hintergrundbilder oder Verläufe zu definieren. Es werden mehrere url() oder Verläufe mit Kommata getrennt aufgeführt. Außerdem können zu jeder dieser background-image Eigenschaften weitere background- Eigenschaftswerte aufgeführt werden, wie Position, Repeat, Attachment. Diese werden mit Leerzeichen getrennt aufgeführt. Der somit erzeugte Block von Eigenschaften wird mit Kommata getrennt. Siehe folgendes Beispiel:

background: url(bild.jpg) right top repeat-x, url(bild2.jpg) left top repeat-y fixed, linear-gradient(0deg, #f0f, #ff0) fixed;

Man muss bei der Reihenfolge aufpassen, denn das Bild welches im Hintergrund des Bildschirms liegt, wird als letztes aufgeführt. Im obigen Beispiel liegt der Verlauf hinten. Eine Hintergrundfarbe background-color muss nach der Kurzform notiert werden.

body {
background: url(../../img/finn1.gif) right top no-repeat, url(../../img/back2.jpg) left top repeat-x;
background-color: #938954;
}