CSS mit Adi Prinz

Hintergrund

Der Hintergrund für Absätze, Container oder andere Element kann in der Regel transparent, farbig oder ein Hintergrundbild sein. Auch Farbverläufe sind möglich.

Eigenschaft	Bedeutung	Wertzuweisung
background-color	Hintergrundfarbe	Farbangabe, transparent, initial, inherit
background-attachment	Hintergrundbild, Verhalten bei Bewegung	fixed, scroll, local, initial, inherit
background-image	Hintergrundbild	url(Pfadangabe), none, initial, inherit
background-position	Position der linken, oberen Ecke	left, right, center, top, bottom, center, Längenangabe, Prozentwert, initial, inherit
background-repeat	Hintergrundbild wiederholen (Kacheln)	no-repeat, repeat, repeat-x, repeat-y, initial, inherit
background-size	Hintergrundbild skalieren	auto, Längenangabe, Prozentangabe, cover, contain, initial, inherit
background-clip	Hintergrundbereich definieren	border-box, padding-box, content-box, initial, inherit
background-origin	Hintergrundbild-Bereich	border-box, padding-box, content-box, initial, inherit
background	Zusammenfassung	background-color background-image background-attachment background-repeat background-position/background-size background-clip background-origin, inherit

background-color

background-color erzeugt einen farbigen Hintergrund für ein Element, background-color ist nicht vererbbar.

p { background-color: rgb(255,0,255); }

Mögliche Werte für background-color

Farbangabe
transparent (Standard)

background-attachment

background-attachment definiert das Verhalten von Hintergrundbilder z.B. beim Scrollen, background-attachment ist nicht vererbbar.

div { background-attachment: fixed; }

Mögliche Werte für background-attachment

fixed: Der Hintergrund bleibt relativ zum Viewport fixiert.
scroll: Der Hintergrund scrollt nicht mit dem Inhalt des Elements; Standardwert.
local: Der Hintergrund scrollt mit dem Inhalt des Elements.

background-image

Mit background-image fügen sie ein Hintergrundbild ein. Für den Notfall wird zusätzlich noch eine Hintergrundfarbe definiert, background-image ist nicht vererbbar.

div { 
  background-image: url("bg_bild.png");
  background-color: #00f;
}

Mögliche Werte für background-image

url: Pfadangabe
none: kein Bild

background-position

Die Position wird mit zwei Längenangaben geschrieben. Der erste Wert bezeichnet die Position in x-Richtung, der zweite die in y-Richtung. Auch negative Werte sind möglich. Wird nur ein Wert angegeben, ist dies die horizontale Position, der fehlende Wert wird mit center dargestellt. Der Ausgangswert ist 0 0 (links, oben), background-position ist nicht vererbbar.

div { 
  background-position: left bottom;
}

Mögliche Werte für background-position

Längenangabe
Prozentwert
left: horizontaler Wert
right: horizontaler Wert
center horizontaler Wert:
top: vertikaler Wert
bottom: vertikaler Wert
center: vertikaler Wert

background-repeat

Wenn sie ein Hintergrundbild einfügen wird dieses normalerweise gekachelt. Das heißt das Bild wird in x- und y-Richtung wiederholt, solange dafür Platz ist. Mit background-repeat können sie diese Verhalten ändern, background-repeat ist nicht vererbbar.

div { 
  background-repeat: no-repeat;
}

Mögliche Werte für background-repeat

repeat: Wiederholung (Standard)
no-repeat: keine Wiederholung
repeat-x: Wiederholung in x-Richtung
repeat-y: Wiederholung in y-Richtung
round: Wiederholung mit angepasster Bildgröße, sodass ganze Kacheln passen
space: Wiederholung mit gleichmäßigem Abstand zwischen ganzen Kacheln

background-size

Mit background-size können sie die Größe des Hintergrundbildes ändern. Standardmäßig behält das Bild seine ursprüngliche Größe, background-size passt das Bild an die Größe des Elements an. Bei Längenangaben schreiben sie zuerst die Breite (width) und dann die Höhe (height), background-size ist nicht vererbbar.

div { background-size: 100px 120px; }

Mögliche Werte für background-size

Längenangabe
Prozentangabe
auto: ursprüngliche Größe (Standard)
cover: Das Bild bedeckt den gesamten Bereich; Teile können abgeschnitten werden.
contain: Das vollständige Bild bleibt sichtbar; freie Flächen sind möglich.

background-clip

Mit background-clip bestimmen Sie, bis zu welchem Bereich der Elementbox der Hintergrund gezeichnet wird. Für das Verständnis dieser Eigenschaft sollten Sie das Kapitel „Box-Modell“ kennen. Die Eigenschaft ist nicht vererbbar.

div { background-clip: padding-box; }

Mögliche Werte für background-clip

border-box: Hintergrund für den gesamten Bereich einschließlich Rahmen (Standardwert)
padding-box: Hintergrund für Content und Padding
content-box: Hintergrund für Content
text: Der Hintergrund wird auf die Form des Textes begrenzt; für sichtbaren Text wird häufig zusätzlich color: transparent verwendet.

background-origin

Mit background-origin bestimmen Sie, auf welchen Box-Bereich sich Position und Größe eines Hintergrundbildes beziehen. Die Eigenschaft kann mit background-size kombiniert werden und ist nicht vererbbar.

div { background-origin: padding-box; }

Mögliche Werte für background-origin

padding-box: Positionierung relativ zur äußeren Kante des Padding-Bereichs; Standardwert
border-box: Positionierung relativ zur äußeren Rahmenkante
content-box: Positionierung relativ zur Kante des Inhaltsbereichs

background

background ist die Kurzschreibweise für die Hintergrundeigenschaften. Dabei sind einige Syntaxregeln zu beachten:

background-size folgt auf background-position; beide werden durch einen Schrägstrich (/) getrennt.
Bei zwei Box-Werten gilt der erste für background-origin und der zweite für background-clip.

background ist nicht vererbbar.

div { background:
  url(bg_bild.gif)         /* image */
  top center / 100px 120px /* position / size */
  no-repeat                /* repeat */
  fixed                    /* attachment */
  padding-box              /* origin */
  content-box              /* clip */
  red;                     /* color */
}

Farbverlauf als Hintergrund

Mit Farbverläufen (Gradienten) können Sie weiche Übergänge zwischen zwei oder mehreren Farben darstellen. CSS bietet uns dafür zwei Gradient-Typen, linear-gradient und radial-gradient. Für gradient-Attribute muss man noch proprietäre Eigenschaften verwenden. Internet Explorer 10 und frühere Versionen Farbverläufe werden von aktuellen Browsern ohne Browser-Präfixe unterstützt. Sie werden als CSS-Bilder verwendet und sind nicht vererbbar.
Farbverläufe schreiben Sie entweder mit background-image oder mit der Kurzschreibweise background.

Wertzuweisung	Bedeutung	Beschreibung
linear-gradient(direction, color-stop1, color-stop2, ...);	linearer Farbverlauf	Richtung, Farbangaben, Verlaufstopp
radial-gradient(shape size at position, start-color, ..., last-color);	radialer Farbverlauf	Form, Größe und Position, Innere Farbe, Äußere Farbe
repeating-linear-gradient(direction, color-stop1, color-stop2, ...);	linearer Farbverlauf	Richtung, Farbangaben, Verlaufstopp
repeating-radial-gradient(shape size at position, start-color, ..., last-color);	radialer Farbverlauf	Form, Größe und Position, Innere Farbe, Äußere Farbe
conic-gradient(from angle at position, color-stop1, color-stop2, ...);	konischer Farbverlauf	Winkel, Mittelpunkt, Farbangaben und Farbstopps
repeating-conic-gradient(from angle at position, color-stop1, color-stop2, ...);	wiederholter konischer Farbverlauf	Winkel, Mittelpunkt, Farbangaben und Farbstopps

linear-gradient

Standardmäßig wird ein Farbverlauf von oben nach unten erzeugt (to bottom = 180deg). Wenn kein Farbstopp definiert ist teilt CSS die angegebenen Farben proportional auf.

.linear {
  background-image: linear-gradient(red, blue);
}

Mögliche Werte für direction

Die Richtung des Farbverlaufs wird mit einer Richtungskonstante (z.B. to bottom) oder mit einem Winkelmaß (z.B. 180deg) geschrieben. Das Winkelmaß deg steht für degrees und beginnt bei mitte oben und dreht sich im Uhrzeigersinn.

to bottom = 180deg (Standard)
to bottom left = 225deg
to left = 270deg
to top left = 315deg
to top = 0deg
to top right = 45deg
to right = 90deg
to bottom right = 135deg

.linear {
  background-image: linear-gradient(to bottom right, red, blue, green);
}

Jeder Farbangabe kann auch noch ein Farbstopp hinzugefügt werden. Für Farbstopps stehen Längenangaben (z.B. Pixel) oder Prozentangaben zur Verfügung:

.linear {
  background-image: linear-gradient(red 30%, blue 100%);
}

repeating-linear-gradient

Wenn Farbstopps kleiner 100% sind wird mit repeating-linear-gradient der Verlauf wiederholt.

.linear {
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

radial-gradient

Ein radialer Farbverlauf geht von einem definierten Mittelpunkt nach außen. Die Form kann entweder Ellipse oder Kreis sein. Wenn nicht angegeben wird ellipse als Form verwendet, size ist farthest-corner (am entfernteste Ecke vom definierten Mittelpunkt) und position (Mittelpunkt) ist center. Auch Farbstopps können geschrieben werden.

.radial {
  background-image: radial-gradient(red, green, blue);
}

Mögliche Werte für shape

ellipse (standard)
circle

Mögliche Werte für size

farthest-side: entfernteste Seite
closest-side: naheste Seite
farthest-corner: entfernteste Ecke (Standard)
closest-corner: naheste Ecke

Mögliche Werte für position

center (standard)
Längenangabe für x- und y-Position (z.B. 20% 40%

.radial {
  background-image: radial-gradient(circle closest-side at 60% 55%, blue 10%, black 30%, red 100%);
}

repeating-radial-gradient

Wenn Farbstopps kleiner 100% sind wird mit repeating-radial-gradient der Verlauf wiederholt.

.radial {
  background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
}

conic-gradient und repeating-conic-gradient

Ein konischer Farbverlauf dreht die Farben um einen Mittelpunkt. Das eignet sich beispielsweise für Farbräder oder Kreisdiagramm-ähnliche Darstellungen. Mit repeating-conic-gradient() wird das definierte Farbmuster wiederholt.

.konisch {
  background: conic-gradient(from 45deg at center, red, gold, green, blue, red);
}

.strahlen {
  background: repeating-conic-gradient(#222 0deg 15deg, #fff 15deg 30deg);
}

Zusammenfassung mit background

Auch für Farbverläufe steht die Kurzschreibweise background zur Verfügung. Die jeweils beiden folgenden Anweisungen bedeuten dasselbe:

  background-image: radial-gradient(red, green, blue);
  background: radial-gradient(red, green, blue);
  background-image: linear-gradient(red, blue);
  background: linear-gradient(red, blue);

Scharfe Übergänge

Scharfe Übergänge, also Farbwechsel ohne weichen Verlauf, erreichen Sie durch zwei unmittelbar aufeinanderfolgende Farbstopps.

.german {
  background: linear-gradient(black 33.3%, red 33.3%, red 66.6%, gold 66.6%);
}
.kreise {
  background: repeating-radial-gradient(circle, black, black 5px, white 5px, white 10px);
}

CSS-Hintergrund

CSS Module

css mit Adi Prinz