Hintergründe

Hinter jedem CSS-Box befindet sich eine spezielle Ebene, die Hintergrundebene. Mit CSS können Sie sinnvolle Änderungen vornehmen, z. B. mehrere Hintergründe zulassen.

Hintergrundebenen sind am weitesten vom Nutzer entfernt und werden hinter dem Inhalt eines Felds gerendert, beginnend mit der padding-box-Region. So überschneidet sich die Hintergrundebene nicht mit Rändern.

Hintergrundfarbe

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Einer der einfachsten Effekte, den Sie auf eine Hintergrundebene anwenden können, ist die Farbe. Der Anfangswert von background-color ist transparent. Dadurch sind die Inhalte eines übergeordneten Elements sichtbar. Eine gültige Farbe, die auf einer Hintergrundebene festgelegt ist, liegt hinter anderen Elementen, die auf diesem Element gemalt wurden.

Hintergrundbilder

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Mit der Property background-image können Sie der background-color-Ebene ein Hintergrundbild hinzufügen. background-image kann Folgendes enthalten:

  • Eine Bild-URL oder ein Daten-URI mit der CSS-Funktion url
  • Ein Bild, das dynamisch mit einer CSS-Funktion für Farbverläufe erstellt wird.

Hintergrundbild mit der CSS-Funktion url festlegen

CSS-Hintergründe mit Farbverlauf

Es gibt mehrere CSS-Funktionen für Farbverläufe, mit denen Sie ein Hintergrundbild generieren können, wenn zwei oder mehr Farben übergeben werden.

Unabhängig davon, welche Farbverlaufsfunktion verwendet wird, wird das resultierende Bild automatisch so skaliert, dass es dem verfügbaren Platz entspricht.

Demo, die das Anwenden eines Hintergrundbilds mithilfe von Farbverlaufsfunktionen zeigt:

Sich wiederholende Hintergrundbilder

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Standardmäßig werden Hintergrundbilder horizontal und vertikal wiederholt, um den gesamten Bereich der Hintergrundebene zu füllen.

Ändern Sie das mithilfe der Property background-repeat und einem der folgenden Werte:

  • repeat: Das Bild wird innerhalb des verfügbaren Bereichs wiederholt und bei Bedarf zugeschnitten.
  • round: Das Bild wird horizontal und vertikal wiederholt, damit so viele Instanzen wie möglich in den verfügbaren Bereich passen. Wenn der verfügbare Platz zunimmt, wird das Bild gedehnt. Nachdem es auf die Hälfte der ursprünglichen Breite gedehnt wurde, wird es komprimiert, um weitere Bildinstanzen hinzuzufügen.
  • space: Das Bild wird horizontal und vertikal wiederholt, um so viele Instanzen wie möglich in den verfügbaren Bereich einzufügen, ohne dass es zugeschnitten wird. Die Instanzen des Bildes werden nach Bedarf verteilt. Die sich wiederholenden Bilder berühren die Ränder des Bereichs, den eine Hintergrundebene einnimmt, wobei die weißen Bereiche gleichmäßig verteilt sind.

Mit dem Attribut background-repeat können Sie das Verhalten für die x- und y-Achse unabhängig voneinander festlegen. Mit dem ersten Parameter wird das horizontale Wiederholungsverhalten festgelegt und mit dem zweiten Parameter das vertikale Wiederholungsverhalten.

Wenn Sie einen einzelnen Wert verwenden, wird er sowohl auf die horizontalen als auch auf die vertikalen Wiederholungen angewendet.

Die Kurzschrift bietet auch praktische Ein-Wort-Optionen, mit denen Sie Ihre Absicht klarer formulieren können.

Der Wert repeat-x wiederholt ein Bild nur horizontal; dies entspricht repeat no-repeat.

In der folgenden Demo werden diese Funktionen der background-repeat-Eigenschaft veranschaulicht:

Hintergrundposition

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Vielleicht ist Ihnen schon aufgefallen, dass einige Bilder im Web mit einer background-repeat: no-repeat-Deklaration formatiert sind und oben links im Container angezeigt werden.

Die Standardposition von Hintergrundbildern ist links oben. Mit der Eigenschaft background-position können Sie dieses Verhalten ändern, indem Sie die Bildposition verschieben.

Wie bei background-repeat können Sie mit der Property background-position Bilder standardmäßig mit zwei Werten unabhängig entlang der X- und Y-Achse positionieren.

Wenn CSS-Längen und -Prozentsätze verwendet werden, entspricht der erste Parameter der horizontalen Achse, während der zweite Parameter der vertikalen Achse entspricht.

Wenn nur Keywords verwendet werden, spielt die Reihenfolge der Keywords keine Rolle:

Do
background-position: left 50%;
Do
background-position: top left;
Do
background-position: left top;

Bei Keywords, die mit verschiedenen Positionsachsen verknüpft sind, spielt die Reihenfolge keine Rolle.

Don'ts
  background-position: 50% left;

Wenn CSS-Werte zusammen mit Keywords verwendet werden, ist die Reihenfolge wichtig. Der erste Wert steht für die horizontale Achse und der zweite für die vertikale Achse.

Don'ts
  background-position: left right;

Sie können Keywords, die mit derselben Achse verknüpft sind, nicht gleichzeitig verwenden.

Die background-position-Eigenschaft hat auch eine praktische Kurzschreibweise mit nur einem Wert. Der ausgelassene Wert wird in 50% umgewandelt. Hier ein Beispiel, das dies anhand der Schlüsselwörter veranschaulicht, die für die background-position-Property zulässig sind:

Zusätzlich zum Standardformat mit zwei und dem Format mit einem Parameter akzeptiert die background-position-Eigenschaft auch bis zu vier Parameter:

Wenn drei oder vier Parameter verwendet werden, muss vor einer CSS-Länge oder einem CSS-Prozentsatz das Keyword top, left, right oder bottom stehen, damit der Browser berechnen kann, von welchem Rand des CSS-Felds der Offset stammen soll.

Wenn drei Parameter verwendet werden, kann eine CSS-Länge oder ein CSS-Wert der zweite oder dritte Parameter sein, wobei die anderen beiden Keywords sind. Das Keyword, das dem Parameter folgt, wird verwendet, um den Rand zu bestimmen, für den die CSS-Länge oder der CSS-Wert als Offset dient. Der Offset des anderen angegebenen Keywords ist auf „0“ festgelegt.

Do
background-position: bottom 88% right;
Do
background-position: right bottom 88%;
Don'ts
background-position: 88% bottom right;
Vor dem CSS-Längenwert muss bei drei oder mehr Parametern das Schlüsselwort top, right, bottom oder left stehen.
Do
background-position: bottom 88% right 33%;
Do
background-position: right 33% bottom 88%;
Don'ts
background-position: 88% 33% bottom left;
Vor dem CSS-Längenwert muss bei drei oder mehr Parametern das Schlüsselwort top, right, bottom oder left stehen.

Wenn background-position: top left 20% auf ein CSS-Hintergrundbild angewendet wird, wird das Bild oben im Feld platziert. Der Wert 20% entspricht einem Versatz von 20% nach links vom Feld (auf der x-Achse).

Wenn background-position: top 20% left auf ein CSS-Hintergrundbild angewendet wird, entspricht der Wert „20 %“ einem Versatz von 20% vom oberen Rand des CSS-Felds (auf der y-Achse) und das Bild wird links neben dem Feld platziert.

Wenn vier Parameter verwendet werden, werden die beiden Keywords mit zwei Werten gekoppelt, die einem Offset gegenüber den Ursprüngen der einzelnen Keywords entsprechen. Wenn background-position: bottom 20% right 30% auf ein Hintergrundbild angewendet wird, wird das Hintergrundbild 20% von unten und 30% von rechts des CSS-Felds positioniert.

In der folgenden Demo wird dieses Verhalten veranschaulicht:

Hier sind weitere Beispiele für die Verwendung der background-position-Eigenschaft mit einer Mischung aus CSS- und Keyword-Werten:

Hintergrundgröße

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Mit der Eigenschaft background-size wird die Größe von Hintergrundbildern festgelegt. Standardmäßig werden Hintergrundbilder anhand ihrer tatsächlichen Breite, Höhe und ihres Seitenverhältnisses skaliert.

Für die Property background-size werden CSS-Längen- und Prozentwerte oder bestimmte Keywords verwendet. Die Eigenschaft akzeptiert bis zu zwei Parameter, sodass Sie Breite und Höhe eines Hintergrunds unabhängig voneinander ändern können.

Für die Property background-size sind die folgenden Keywords zulässig:

  • auto: Wenn auto unabhängig verwendet wird, wird die Größe des Hintergrundbilds anhand seiner ursprünglichen Breite und Höhe festgelegt. Wenn auto zusammen mit einem anderen CSS-Wert für die Breite (erster Parameter) oder Höhe (zweiter Parameter) verwendet wird, wird die auf auto festgelegte Dimension so angepasst, dass das natürliche Seitenverhältnis des Bildes beibehalten wird. Das ist das Standardverhalten der Property background-size.
  • cover: Deckt die gesamte Fläche der Hintergrundebene ab. Das Bild ist möglicherweise skaliert oder zugeschnitten.
  • contain: Die Größe des Bildes wird so angepasst, dass es den Bereich ausfüllt, ohne es zu strecken oder zuzuschneiden. Es kann also zu Lücken kommen, die dazu führen, dass das Bild wiederholt wird, es sei denn, background-repeat ist auf no-repeat festgelegt.

Die beiden letzteren sind für die eigenständige Verwendung ohne anderen Parameter vorgesehen.

In der folgenden Demo werden diese Keywords in Aktion gezeigt:

Demo, die die Anwendung dieser Keywords auf background-size zeigt:

Hintergrundanhänge

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Mit der Eigenschaft background-attachment können Sie das Verhalten der fixen Position von Hintergrundbildern (Bildern, die zu einer Hintergrundebene gehören) ändern, sobald die Ebene auf einem Bildschirm sichtbar ist.

Es werden drei Keywords akzeptiert: scroll, fixed und local.

Das Standardverhalten der Property background-attachment ist der Anfangswert von scroll. Wenn mehr Platz benötigt wird, bewegen sich die Bilder innerhalb der Hintergrundebene, die durch die Grenzen des CSS-Felds bestimmt wird.

Mit dem Wert fixed wird die Position der Hintergrundbilder am Viewport fixiert.

Sobald der ursprünglich von den Bildern der Hintergrundebene belegte Bereich außerhalb des sichtbaren Bereichs gescrollt (oder gerendert) werden muss, bleiben die Bilder in der Hintergrundebene an der ursprünglichen Position, die ihnen die Hintergrundebene ermöglicht hat, bis die gesamte Ebene durch den Darstellungsbereich außerhalb des sichtbaren Bereichs gescrollt wird.

Mit dem Keyword local kann die Position von Hintergrundbildern relativ zum Inhalt des Elements festgelegt werden. Hintergrundbilder bewegen sich jetzt innerhalb des von ihnen belegten Bereichs, wenn dieser Bereich innerhalb und außerhalb des CSS-Felds gerendert wird (in der Regel aufgrund von Scrollen, 2D- oder 3D-Transformationen).

Herkunft des Hintergrunds

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Source

Mit der Eigenschaft background-origin können Sie den Bereich der Hintergründe ändern, der mit einem bestimmten Feld verknüpft ist. Die zulässigen Werte der Property entsprechen den Bereichen border-box, padding-box und content-box eines Felds .

Probieren Sie diese Optionen in der folgenden Demo aus:

Hintergrundclip

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Mit der Eigenschaft background-clip wird festgelegt, was von einer Hintergrundebene sichtbar ist, unabhängig von den durch die Eigenschaft background-origin erstellten Begrenzungen.

Wie background-origin können auch border-box, padding-box und content-box angegeben werden. Sie geben an, wo eine CSS-Hintergrundebene gerendert werden kann. Wenn diese Keywords verwendet werden, wird der Hintergrund außerhalb des angegebenen Bereichs zugeschnitten.

Für die Property background-clip kann auch das Keyword text verwendet werden, um den Hintergrund so zuzuschneiden, dass er nicht über den Text im Inhaltsfeld hinausragt. Damit dieser Effekt im tatsächlichen Text in einem CSS-Feld sichtbar ist, muss der Text teilweise oder vollständig transparent sein.

Ein relativ neues Attribut. Zum Zeitpunkt der Erstellung dieses Artikels ist für die Verwendung dieses Attributs in Chrome und den meisten anderen Browsern das Präfix -webkit- erforderlich.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Mehrere Hintergründe

Wie bereits zu Beginn des Moduls erwähnt, können für die Hintergrundebene mehrere Unterebenen definiert werden. Der Einfachheit halber bezeichne ich diese Ebenen als Hintergründe.

Mehrere Hintergründe werden von oben nach unten definiert. Der erste Hintergrund ist dem Nutzer am nächsten, während der letzte Hintergrund am weitesten vom Nutzer entfernt ist.

Der einzige definierte Hintergrund oder die letzte Ebene wird vom Browser als letzte Hintergrundebene bezeichnet. Nur dieser Ebene darf eine background-color zugewiesen werden.

Mehrere Ebenen können mit den meisten CSS-Eigenschaften für Hintergründe individuell konfiguriert werden, die durch Kommas getrennt sind, wie im Code-Snippet und in der Live-Demo unten gezeigt.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

Die Kurzschreibweise für den Hintergrund

Um das Stylen der Hintergrundebene eines Felds zu vereinfachen, insbesondere wenn mehrere Hintergrundebenen erforderlich sind, gibt es eine Kurzschreibweise, die dem folgenden Muster folgt:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

Bei der Kurzform zur Deklarierung mehrerer Hintergründe ist die Reihenfolge wichtig. Die Werte für „Position“ und „Größe“ müssen angegeben werden und durch einen Schrägstrich (/) getrennt werden. Wenn Sie den Ursprung und das Clip-Verhalten in der richtigen Reihenfolge angeben, können Sie Keywords festlegen, die für beide gleichzeitig gültig sind.

In der folgenden Deklaration wird der Hintergrund zugeschnitten und aus dem Inhaltsfeld abgeleitet:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

Unter Berücksichtigung dieser Kurzschreibweisen könnten die vorherigen sitzungsbezogenen Deklarationen des Code-Snippets so umgeschrieben werden:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

Wissenstest

Ihr Wissen zu CSS-Hintergründen testen

Hintergrundbilder werden links oben in einem CSS-Box platziert.

Richtig
Falsch

Hintergrundbilder werden standardmäßig wiederholt.

Richtig
Falsch

Welche der folgenden background-position-Erklärungen sind gültig?

background-position: 50% left
background-position: top right 33%
background-position: left
background-position: right bottom

So legen Sie fest, dass ein Hintergrundbild innerhalb eines Darstellungsbereichs fixiert werden soll:

background-attachment: fixed
background-fixed-to-viewport: true
background-position: fixed
background-attachment: scroll

Der Standardwert für „background-origin“ eines Hintergrunds in einem CSS-Box ist:

border-box
content-box
padding-box
margin-box