Hintergründe

The CSS Podcast – 053: Background

Hintergründe

Hinter jedem CSS-Feld befindet sich eine spezielle Ebene, die als Hintergrundebene bezeichnet wird. CSS bietet eine Vielzahl von Möglichkeiten, sinnvolle Änderungen daran vorzunehmen, einschließlich der Möglichkeit, mehrere Hintergründe zuzulassen.

Hintergrundebenen werden am weitesten vom Nutzer entfernt und hinter den Inhalten eines Felds gerendert, beginnend bei ihrem padding-box-Bereich. Dadurch wird verhindert, dass sich die Hintergrundebene mit den Rahmen überschneidet.

Hintergrundfarbe

Unterstützte Browser

• 1
• 12
• 1
• 1

Quelle

Einer der einfachsten Effekte, die Sie auf eine Hintergrundebene anwenden können, ist das Festlegen der Farbe. Der Anfangswert von background-color ist transparent. Dadurch ist der Inhalt eines übergeordneten Elements sichtbar. Ein gültiger Farbsatz einer Hintergrundebene befindet sich hinter anderen Elementen, die auf diesem Element dargestellt sind.

Hintergrundbilder

Unterstützte Browser

• 1
• 12
• 1
• 1

Quelle

Über der Ebene background-color kannst du mithilfe der Eigenschaft background-image ein Hintergrundbild hinzufügen. Ein background-image akzeptiert Folgendes:

• Eine Bild-URL oder ein Daten-URI mit der CSS-Funktion url.
• Ein Bild, das dynamisch mit einer Farbverlauf-CSS-Funktion erstellt wird.

Hintergrundbild mit der CSS-Funktion url festlegen

CSS-Farbverlauf-Hintergründe

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

Unabhängig davon, welche Gradientenfunktion verwendet wird, wird das resultierende Bild direkt an den verfügbaren Platz angepasst.

Beispiel für die Anwendung eines Hintergrundbilds mithilfe von Farbverlaufsfunktionen:

Sich wiederholende Hintergrundbilder

Unterstützte Browser

• 1
• 12
• 1
• 1

Quelle

Standardmäßig werden Hintergrundbilder horizontal und vertikal wiederholt, um die gesamte Fläche der Hintergrundebene auszufüllen.

Ändern Sie dies, indem Sie das Attribut background-repeat mit einem der folgenden Werte verwenden:

• repeat: Das Bild wird im verfügbaren Bereich wiederholt und es wird bei Bedarf zugeschnitten.
• round: Das Bild wird horizontal und vertikal wiederholt, um in den verfügbaren Platz so viele Instanzen zu finden. Wenn der verfügbare Platz größer wird, wird das Bild gestreckt und nach der Hälfte der ursprünglichen Breite des Bildes komprimiert, um weitere Bildinstanzen hinzuzufügen.
• space: Das Bild wird horizontal und vertikal wiederholt, um in den verfügbaren Bereich des Bildes einzupassen, ohne abgeschnitten zu werden. Sich wiederholende Bilder berühren die Ränder der Fläche, die eine Hintergrundebene einnimmt, und der Leerraum ist gleichmäßig zwischen ihnen verteilt.

Mit der Eigenschaft background-repeat können Sie die Funktionsweise der X- und der Y-Achse unabhängig voneinander festlegen. Mit dem ersten Parameter wird das horizontale Wiederholungsverhalten festgelegt, mit dem zweiten das vertikale Wiederholungsverhalten.

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

Die Kurzinfo bietet auch praktische Ein-Wort-Optionen, um Ihre Absichten klarer zu machen.

Mit dem Wert repeat-x wird ein Bild nur horizontal wiederholt. Dies entspricht repeat no-repeat.

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

Hintergrundposition

Unterstützte Browser

• 1
• 12
• 1
• 1

Quelle

Sie haben vielleicht bemerkt, dass einige Bilder im Web oben links in ihrem Container angezeigt werden, wenn sie mit einer background-repeat: no-repeat-Deklaration versehen sind.

Hintergrundbilder werden oben links positioniert. 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 background-position-Eigenschaft Bilder entlang der X- und Y-Achse standardmäßig unabhängig mit zwei Werten positionieren.

Bei Verwendung von CSS-Längen und -Prozentsätzen entspricht der erste Parameter der horizontalen Achse, der zweite Parameter der vertikalen Achse.

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

Das sollten Sie tun:

background-position: left 50%;

Das sollten Sie tun:

background-position: top left;

Das sollten Sie tun:

background-position: left top;

Die Reihenfolge spielt für Keywords mit unterschiedlichen Positionsachsen 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, der zweite für die vertikale Achse.

Don'ts

  background-position: left right;

Sie können nicht gleichzeitig Keywords verwenden, die derselben Achse zugeordnet sind.

Für das Attribut background-position gibt es auch eine praktische Kurzschreibweise: Der weggelassene Wert wird in 50% aufgelöst. Das folgende Beispiel veranschaulicht dies anhand der Keywords, die von der background-position-Property akzeptiert werden:

Zusätzlich zur standardmäßigen Form mit zwei und einem Parameter kann die background-position-Eigenschaft bis zu vier Parameter verwenden.

Wenn drei oder vier Parameter verwendet werden, muss den top-, left-, right- oder bottom-Keywords eine CSS-Länge oder ein CSS-Prozentsatz vorangestellt werden, damit der Browser berechnet, von welchem Rand der CSS-Box der Versatz stammen soll.

Wenn drei Parameter verwendet werden, kann ein CSS-Längen- oder -Wert der zweite oder dritte Parameter sein, wobei die anderen beiden Keywords sind. Anhand des erfolgreichen Schlüsselworts wird die Kante bestimmt, für die die CSS-Länge oder der CSS-Wert den Versatz darstellt. Der Offset des anderen angegebenen Keywords ist auf 0 gesetzt.

Das sollten Sie tun:

background-position: bottom 88% right;

Das sollten Sie tun:

background-position: right bottom 88%;

Don'ts

background-position: 88% bottom right;

Wenn drei oder mehr Parameter verwendet werden, müssen dem CSS-Längenwert die Keywords top, right, bottom oder left vorangestellt sein.

Das sollten Sie tun:

background-position: bottom 88% right 33%;

Das sollten Sie tun:

background-position: right 33% bottom 88%;

Don'ts

background-position: 88% 33% bottom left;

Wenn drei oder mehr Parameter verwendet werden, müssen dem CSS-Längenwert die Keywords top, right, bottom oder left vorangestellt sein.

Wenn background-position: top left 20% auf ein CSS-Hintergrundbild angewendet wird, wird das Bild oben im Feld platziert. Der Wert 20% entspricht einem Abstand von 20% zur linken Seite des Felds (auf der X-Achse).

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

Bei Verwendung von vier Parametern werden die beiden Keywords mit zwei Werten gekoppelt, die einem Versatz gegenüber den Ursprüngen der angegebenen Keywords entsprechen. Wenn background-position: bottom 20% right 30% auf ein Hintergrundbild angewendet wird, wird das Hintergrundbild 20% vom unteren Rand und 30% von rechts neben dem CSS-Feld positioniert.

In der folgenden Demo wird dieses Verhalten veranschaulicht:

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

Hinweis : Weitere Informationen zu den Feinheiten der Positionierung von Hintergründen findest du unter background-position auf MDN.

Hintergrundgröße

Unterstützte Browser

• 3
• 12
• 4
• 5

Quelle

Mit der Eigenschaft background-size wird die Größe der Hintergrundbilder festgelegt. Die Größe von Hintergrundbildern basiert standardmäßig auf ihrer intrinsischen (tatsächlichen) Breite und Höhe und ihrem Seitenverhältnis.

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

Für die Property background-size werden die folgenden Keywords akzeptiert:

• auto: Bei unabhängiger Verwendung wird die Größe des Hintergrundbilds an die vorgegebene Breite und Höhe angepasst. Wird auto zusammen mit einem anderen CSS-Wert für die Breite (erster Parameter) oder die Höhe (zweiter Parameter) verwendet, wird die Dimension mit dem Wert auto so angepasst, dass das natürliche Seitenverhältnis des Bildes erhalten bleibt. Das ist das Standardverhalten des Attributs background-size.
• cover: Deckt den gesamten Bereich der Hintergrundebene ab. Dies kann bedeuten, dass das Bild gestreckt oder zugeschnitten ist.
• contain: Die Größe des Bildes wird so angepasst, dass der gesamte Raum ausgefüllt wird. Es wird nicht gestreckt oder abgeschnitten. Daher kann Leerraum bleiben, der dazu führt, dass sich das Bild wiederholt, es sei denn, background-repeat ist auf no-repeat gesetzt.

Die beiden letzten Optionen sind für die eigenständige Verwendung ohne weiteren Parameter vorgesehen.

In der folgenden Demo werden diese Keywords in Aktion gezeigt:

Demo zur Anwendung dieser Keywords auf background-size:

Hintergrundanhang

Unterstützte Browser

• 1
• 12
• 1
• 1

Quelle

Mit der Eigenschaft background-attachment können Sie das Verhalten für feste Positionen von Hintergrundbildern (Bilder als Teil einer Hintergrundebene) ändern, sobald die Ebene auf dem Bildschirm sichtbar ist.

Zulässig sind drei Keywords: scroll, fixed und local.

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

Mit dem Wert fixed wird die Position von Hintergrundbildern im Darstellungsbereich fixiert.

Sobald die Bilder der Hintergrundebene ursprünglich vom Bildschirm aus gescrollt (oder gerendert werden) müssen, bleiben die Bilder innerhalb der Hintergrundebene an ihrer ursprünglichen Position, die durch die Hintergrundebene aktiviert wurde, bis die gesamte Ebene vom Darstellungsbereich über den Bildschirm hinausgescrollt wird.

Das Schlüsselwort local ermöglicht, dass die Position von Hintergrundbildern relativ zum Inhalt des Elements festgelegt werden kann. Hintergrundbilder bewegen sich nun entlang des Raumes, den sie einnehmen, da dieser Raum innerhalb und außerhalb der Grenzen des CSS-Felds gerendert wird (normalerweise durch Scrollen, 2D- oder 3D-Transformationen).

Hintergrundursprung

Unterstützte Browser

• 1
• 12
• 4
• 3

Quelle

Mit der Eigenschaft background-origin kannst du den mit einem bestimmten Feld verknüpften Hintergrundbereich ändern. Die von der Property akzeptierten Werte entsprechen den border-box-, padding-box- und content-box-Regionen einer Box .

Probieren Sie diese Optionen anhand der folgenden Demo aus:

Hintergrundclip

Unterstützte Browser

• 1
• 12
• 4
• 5

Quelle

Mit der Eigenschaft background-clip wird gesteuert, was von einer Hintergrundebene unabhängig von den mit der Eigenschaft background-origin erstellten Grenzen dargestellt wird.

Wie bei background-origin können auch die Regionen border-box, padding-box und content-box angegeben werden. Sie entsprechen den Regionen, in denen eine CSS-Hintergrundebene gerendert werden kann. Bei Verwendung dieser Keywords wird jedes Rendering des Hintergrunds, der über dem angegebenen Bereich liegt, zugeschnitten oder beschnitten.

Die Eigenschaft background-clip akzeptiert auch ein text-Keyword, mit dem der Hintergrund so zugeschnitten wird, dass er nicht weiter als der Text im Inhaltsfeld ist. Damit dieser Effekt im Text in einem CSS-Feld deutlich wird, muss der Text teilweise oder vollständig transparent sein.

Zum Zeitpunkt der Veröffentlichung dieses Dokuments benötigen Chrome und die meisten Browser eine relativ neue Property, die das Präfix -webkit- erfordert, um sie zu verwenden.

Unterstützte Browser

• 1
• 12
• 4
• 5

Quelle

Hinweis : Diese Eigenschaft ist nicht mit background-clip: text kompatibel, der gleichzeitig in einem CSS-Feld festgelegt wird.

Mehrere Hintergründe

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

Es werden mehrere Hintergründe 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.

Die einzige definierte oder letzte Ebene wird vom Browser als endgültige Hintergrundebene festgelegt. Nur diese Ebene darf eine background-color zuweisen.

Hinweis : Aufgrund der Unvorhersehbarkeit des Webs kann es vorkommen, dass ein Hintergrundbild nicht geladen wird. Durch das Festlegen einer Hintergrundfarbe auf der letzten Ebene wird ein guter Textkontrast sichergestellt und so weiter, falls wichtige Hintergrundebenen nicht geladen werden.

Mehrere Ebenen können individuell mit den meisten hintergrundbezogenen CSS-Eigenschaften konfiguriert werden, die durch Kommas getrennt sind, wie im Code-Snippet und 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 Kurzform des Hintergrunds

Um die Gestaltung der Hintergrundebene einer Box zu erleichtern, insbesondere wenn mehrere Hintergrundebenen erwünscht 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>?

: Alle Hintergrundeigenschaften, die in der Kurzschreibweise weggelassen werden, werden auf ihre Anfangswerte gesetzt.

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

Mit der folgenden Deklaration wird der Hintergrund zugeschnitten und aus dem Inhaltsfeld übernommen:

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

Unter Berücksichtigung dieser Kurzform der Semantik könnten die vorherigen hintergrundbezogenen 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 ;

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über CSS-Hintergründe

Hintergrundbilder werden oben links in einem CSS-Feld positioniert.

Richtig

Richtig!

Falsch

Je nach der integrierten Größe eines Bildes kann es so aussehen, als wäre es nicht in der oberen linken Ecke eines CSS-Felds positioniert, background-position muss explizit verwendet werden, um die Standardposition eines Hintergrundbilds zu ändern.

Hintergrundbilder werden nicht standardmäßig wiederholt.

Falsch

background-repeat: no-repeat muss explizit verwendet werden, wenn ein Hintergrundbild nicht wiederholt werden soll. Außerdem können background-repeat: repeat-x und background-repeat: repeat-y verwendet werden, um Wiederholungen auf der jeweiligen Achse zu verhindern.

Richtig

Richtig!

Welche der folgenden background-position-Deklarationen sind gültig?

background-position: 50% left

Wenn CSS-Werte mit Keywords verwendet werden, ist die Reihenfolge der Werte wichtig.

background-position: top right 33%

Dadurch wird ein Hintergrundbild ganz oben in der Box und 33% vom rechten Rand des Felds entfernt.

background-position: right bottom

Dadurch wird ein Hintergrundbild ganz rechts und unten in einem Feld positioniert. Die Position unterschiedlicher Achsen kann in beliebiger Reihenfolge angegeben werden.

background-position: left

Dadurch wird ein Hintergrundbild ganz links neben dem Feld positioniert und vertikal zentriert. Wenn nur eine Position einer Achse angegeben wird, wird das Hintergrundbild in der gegenüberliegenden Achse zentriert.

So legen Sie fest, dass ein Hintergrundbild innerhalb eines von Ihnen verwendeten Darstellungsbereichs fixiert wird:

background-position: fixed

„Dies ist ein ungültiger Wert für die Eigenschaft background-position.“

background-fixed-to-viewport: true

background-fixed-to-viewport ist im Preisvergleichsportal noch nicht vorhanden.

background-attachment: fixed

background-attachment: fixed legt explizit fest, dass das Hintergrundbild im aktuellen Darstellungsbereich fixiert wird.

background-attachment: scroll

background-attachment ist die Eigenschaft, die verwendet werden soll, um ein Hintergrundbild festzulegen, das in einem Darstellungsbereich fixiert werden soll. scroll ist jedoch der Standardwert für die Eigenschaft, die das Hintergrundbild standardmäßig an das Rechteck anpasst, das nicht vom Inhalt des Felds betroffen ist.

Der standardmäßige Hintergrund-Ursprung eines Hintergrunds in einem CSS-Feld ist:

content-box

Gültiger Wert für background-origin, aber nicht der Standardwert.

border-box

Gültiger Wert für background-origin und seine vorab arrangierten Rahmen können als Hintergrund gezeichnet werden. Dies ist jedoch nicht die Standardeinstellung.

padding-box

Der Standardwert für background-origin. Der Hintergrund kann über den Inhalt und bis zum Rand eines Felds gerendert werden.

margin-box

Obwohl die Region einer CSS-Box erkannt wird, ist sie kein gültiger Wert für die Eigenschaft background-origin.