Hintergründe und Ränder

Die background-color-Eigenschaft definiert die Hintergrundfarbe für jedes Element in CSS. Die Eigenschaft akzeptiert jeden gültigen <color>. Eine background-color erstreckt sich unterhalb des Inhalts- und Padding-Bereichs des Elements.

Im folgenden Beispiel haben wir verschiedene Farbwerte verwendet, um einer Box, einer Überschrift und einem <span>-Element eine Hintergrundfarbe hinzuzufügen.

Versuchen Sie, das Beispiel zu bearbeiten und die angegebenen Farben mit verfügbaren <color> Werten auszutauschen.

<div class="box">
  <h2>Background Colors</h2>
  <p>Try changing the background <span>colors</span>.</p>
</div>

.box {
  padding: 0.3em;
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
span {
  background-color: rgb(255 255 255 / 50%);
}

Die background-image-Eigenschaft ermöglicht die Anzeige eines Bildes im Hintergrund eines Elements. Im Beispiel unten haben wir zwei Boxen — eine hat ein Hintergrundbild, das größer ist als die Box (balloons.jpg). Die andere hat ein kleines Bild eines einzelnen Sterns (star.png).

Dieses Beispiel zeigt zwei Dinge über Hintergrundbilder. Standardmäßig wird das große Bild nicht verkleinert, um in die Box zu passen, sodass wir nur einen kleinen Teil davon sehen, während das kleine Bild gekachelt wird, um die Box zu füllen.

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

.wrapper {
  display: flex;
}

.box {
  width: 200px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #ccc;
  margin: 20px;
}

.a {
  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
}

.b {
  background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
}

Wenn Sie zusätzlich zu einem Hintergrundbild eine Hintergrundfarbe angeben, wird das Bild über der Farbe angezeigt. Versuchen Sie, dem obigen Beispiel eine background-color-Eigenschaft hinzuzufügen, um das in Aktion zu sehen.

Die background-repeat-Eigenschaft wird verwendet, um das Kachelverhalten von Bildern zu steuern. Die verfügbaren Werte sind:

• no-repeat — verhindert jegliche Wiederholung des Hintergrunds.
• repeat-x — Wiederholung horizontal.
• repeat-y — Wiederholung vertikal.
• repeat — der Standard; Wiederholung in beide Richtungen.
• space — Wiederholung so oft wie möglich, Hinzufügen von Leerstellen zwischen den Bildern, wenn zusätzlicher Platz vorhanden ist.
• round — ähnlich wie space, aber dehnt die Bilder aus, um zusätzlichen Raum zu füllen.

Probieren Sie diese Werte im folgenden Beispiel aus. Wir haben den Wert auf no-repeat gesetzt, sodass Sie nur einen Stern sehen werden. Testen Sie die verschiedenen Werte, um ihre Effekte zu sehen.

<div class="box"></div>

.box {
  width: 200px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #ccc;
  margin: 20px;
}

.box {
  background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
  background-repeat: no-repeat;
}

Das Bild balloons.jpg, das im ursprünglichen Hintergrundbildbeispiel verwendet wurde, ist ein großes Bild, das abgeschnitten wurde, weil es größer ist als das Element, dessen Hintergrund es ist. In diesem Fall können wir die background-size-Eigenschaft verwenden, um die Größe des Bildes an den Hintergrund anzupassen.

background-size kann zwei <length>- oder <percentage>-Werte annehmen, um die Größe des Bildes in horizontaler und vertikaler Richtung zu spezifizieren, oder die folgenden Schlüsselwörter:

• cover — Der Browser macht das Bild gerade groß genug, um den gesamten Boxbereich zu bedecken, während das Seitenverhältnis beibehalten wird. In diesem Fall wird wahrscheinlich ein Teil des Bildes außerhalb der Box enden.
• contain — Der Browser passt das Bild so an, dass es in die Box passt. In diesem Fall können Lücken an den Seiten oder oben und unten entstehen, wenn das Seitenverhältnis des Bildes von dem der Box abweicht.

Spielen mit background-size

Im folgenden Beispiel hat das Bild balloons.jpg Längeneinheiten, um es passend in die Box einzufügen. Sie können sehen, dass dies das Bild verzerrt hat.

Versuchen Sie Folgendes:

• Ändern Sie die verwendeten Längeneinheiten, um die Größe des Hintergrunds zu ändern.
• Entfernen Sie die Längeneinheiten und sehen Sie, was passiert, wenn Sie background-size: cover oder background-size: contain verwenden.
• Verkleinern Sie das Bild kleiner als die Box und ändern Sie dann den Wert von background-repeat, um das Bild zu wiederholen.

<div class="box"></div>

.box {
  width: 500px;
  height: 100px;
  padding: 0.5em;
  border: 1px solid #ccc;
  margin: 10px;
}

.box {
  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
  background-repeat: no-repeat;
  background-size: 80px 10em;
}

Die background-position-Eigenschaft ermöglicht es Ihnen, die Position zu wählen, an der das Hintergrundbild auf der Box erscheint. Dies verwendet ein Koordinatensystem, bei dem die obere linke Ecke der Box (0,0) ist und die Box entlang der horizontalen (x) und vertikalen (y) Achsen positioniert wird.

Die gebräuchlichsten background-position-Werte nehmen zwei Einzelwerte an — einen horizontalen Wert gefolgt von einem vertikalen Wert. Sie können Schlüsselwörter wie top und right verwenden (sehen Sie sich die anderen auf der background-position-Seite an):

.box {
  background-image: url(image.png);
  background-repeat: no-repeat;
  background-position: top center;
}

Sie können auch Längen und Prozentangaben verwenden:

.box {
  background-image: url(image.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

Sie können auch Schlüsselwortwerte mit Längen oder Prozentangaben mischen, in diesem Fall bezieht sich der erste Wert auf die horizontale Position und der zweite auf die vertikale Position. Zum Beispiel:

.box {
  background-image: url(image.png);
  background-repeat: no-repeat;
  background-position: 20px top;
}

Schließlich können Sie auch eine 4-Wert-Syntax verwenden, um einen Abstand von bestimmten Kanten der Box anzugeben. Jedes Wertepaar repräsentiert die Kante der Box, von der der Abstand genommen wird, und die Größe des Abstands von dieser Kante. Im folgenden Ausschnitt positionieren wir den Hintergrund 20px vom top und 10px vom right entfernt:

.box {
  background-image: url(image.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}

Spielen mit background-position

Verwenden Sie das folgende Beispiel, um mit diesen Werten zu experimentieren und den Stern innerhalb der Box zu bewegen:

<div class="box"></div>

.box {
  width: 500px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #ccc;
  margin: 20px;
}

.box {
  background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
  background-repeat: no-repeat;
  background-position: 120px 1em;
}

Ein Farbverlauf — wenn er für einen Hintergrund verwendet wird — wirkt genauso wie ein Bild und wird ebenfalls mit der background-image-Eigenschaft festgelegt.

Sie können auf der MDN-Seite für den <gradient> Datentyp mehr über die verschiedenen Arten von Farbverlaufwerten und deren Verwendungsmöglichkeiten erfahren.

Probieren Sie einige verschiedene Farbverlaufswerte im folgenden Beispiel aus. Zunächst haben wir einen linearen Verlauf, der über die gesamte erste Box gespannt ist, und einen radialen Verlauf mit fester Größe, der über die zweite Box wiederholt wird.

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

.wrapper {
  display: flex;
}

.box {
  width: 400px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #ccc;
  margin: 20px;
}

.a {
  background-image: linear-gradient(
    105deg,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
}

.b {
  background-image: radial-gradient(
    circle,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
  background-size: 100px 50px;
}

Es ist auch möglich, mehrere Hintergrundbilder in einer einzigen Deklaration anzugeben. Dies tun Sie, indem Sie mehrere background-image-Werte durch Kommas getrennt angeben.

Wenn Sie dies tun, können Sie am Ende Hintergrundbilder haben, die sich überlappen. Die Hintergründe werden mit dem zuletzt aufgeführten Hintergrundbild unten im Stapel geschichtet, und jedes vorherige Bild überlagert das folgende in der Reihenfolge, in der es im Code erscheint.

Die anderen background-* Eigenschaften können ebenfalls durch Kommas getrennte Werte auf die gleiche Weise wie background-image annehmen:

background-image:
  url(image1.png), url(image2.png), url(image3.png), url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;

Jeder Wert der verschiedenen Eigenschaften wird mit den Werten in der gleichen Position in den anderen Eigenschaften abgeglichen. Oben zum Beispiel wird der background-repeat-Wert von image1 no-repeat sein. Aber was passiert, wenn unterschiedliche Eigenschaften unterschiedliche Anzahl von Werten haben? Die Antwort ist, dass die kleineren Zahlen von Werten zyklisch verwendet werden — im obigen Beispiel gibt es vier Hintergrundbilder, aber nur zwei background-position Werte. Die ersten zwei Positionswerte werden auf die ersten beiden Bilder angewendet, dann werden sie wieder von vorne verwendet — image3 erhält den ersten Positionswert und image4 den zweiten.

Lassen Sie uns spielen. Das folgende Beispiel enthält zwei Hintergrundbilder. Bearbeiten Sie das Beispiel wie folgt:

• Um die Stapelreihenfolge zu demonstrieren, versuchen Sie, welches Hintergrundbild zuerst in der Liste erscheint, zu ändern.
• Fügen Sie einige andere background-*-Eigenschaften hinzu, um die Position, Größe oder den Wiederholungswert der Bilder zu ändern.
• Versuchen Sie, einen Farbverlauf als drittes background-image hinzuzufügen.

<div class="wrapper">
  <div class="box"></div>
</div>

.wrapper {
  display: flex;
}

.box {
  width: 500px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #ccc;
  margin: 20px;
}

.box {
  background-image:
    url(https://mdn.github.io/shared-assets/images/examples/star.png),
    url(https://mdn.github.io/shared-assets/images/examples/big-star.png);
}

Eine weitere Option, die wir für Hintergründe haben, ist die Angabe, wie sie beim Scrollen des Inhalts scrollen. Dies wird mit der background-attachment-Eigenschaft gesteuert, die folgende Werte annehmen kann:

• scroll: bewirkt, dass der Hintergrund des Elements beim Scrollen der Seite scrollt. Wenn der Elementinhalt gescrollt wird, bewegt sich der Hintergrund nicht. Tatsächlich ist der Hintergrund fest mit derselben Position auf der Seite verbunden, sodass er beim Scrollen der Seite scrollt.
• fixed: bewirkt, dass der Hintergrund eines Elements am Ansichtsfenster befestigt ist, damit er nicht scrollt, wenn die Seite oder der Elementinhalt gescrollt wird. Er bleibt immer an derselben Position auf dem Bildschirm.
• local: befestigt den Hintergrund an dem Element, auf dem er gesetzt ist, sodass, wenn Sie das Element scrollen, der Hintergrund mit ihm scrollt.

Die background-attachment-Eigenschaft hat nur dann eine Auswirkung, wenn es Inhalt zum Scrollen gibt, daher haben wir eine Demo erstellt, um die Unterschiede zwischen den drei Werten zu demonstrieren — sehen Sie sich background-attachment.html an (sehen Sie sich auch den Quellcode hier an).

Sie werden oft sehen, dass Hintergründe mit der background-Kurzform-Eigenschaft spezifiziert werden, die es Ihnen ermöglicht, alle verschiedenen Eigenschaften gleichzeitig festzulegen.

Wenn mehrere Hintergründe verwendet werden, müssen Sie alle Eigenschaften des ersten Hintergrunds angeben und dann nach einem Komma Ihren nächsten Hintergrund hinzufügen. Im folgenden Beispiel haben wir einen Verlauf mit Größe und Position, dann ein Bildhintergrund mit no-repeat und einer Position, dann eine Farbe.

Es gibt einige Regeln, die beim Schreiben von Hintergrund-Kurzformwerten befolgt werden müssen, zum Beispiel:

• Eine background-color darf nur nach dem letzten Komma angegeben werden.
• Der Wert von background-size darf nur unmittelbar nach background-position enthalten sein, getrennt durch das /-Zeichen, so: center/80%.

Schauen Sie sich die MDN-Seite für background an, um mehr über die Syntax zu erfahren.

<div class="box"></div>

.box {
  width: 500px;
  height: 300px;
  padding: 0.5em;
  background:
    linear-gradient(
        105deg,
        rgb(255 255 255 / 20%) 39%,
        rgb(51 56 57 / 100%) 96%
      )
      center center / 400px 200px no-repeat,
    url(https://mdn.github.io/shared-assets/images/examples/big-star.png) center
      no-repeat,
    rebeccapurple;
}

Wenn Sie Text auf einen Hintergrund mit Bild oder Farbe setzen, sollten Sie darauf achten, dass Sie genügend Kontrast haben, damit der Text für Ihre Besucher lesbar ist. Wenn Sie ein Bild mit darüber liegendem Text angeben, sollten Sie auch eine background-color angeben, die es ermöglicht, den Text lesbar zu machen, falls das Bild nicht geladen wird.

Bildschirmschreiber können Hintergrundbilder nicht analysieren; daher sollten sie rein dekorativ sein. Alle wichtigen Inhalte sollten Teil der HTML-Seite sein und nicht in einem Hintergrund enthalten sein.

Beim Erlernen des Box-Modells haben wir entdeckt, wie Ränder die Größe unserer Box beeinflussen. In dieser Lektion werden wir uns ansehen, wie man Ränder kreativ verwenden kann.

Typischerweise verwenden wir bei der Hinzufügung von Rändern zu einem Element mit CSS die border-Kurzform-Eigenschaft, um die Farbe, Breite und den Stil des Randes an allen vier Seiten einer Box in einer Deklaration festzulegen:

.box {
  border: 1px solid black;
}

Oder wir können einen Rand der Box gezielt ansprechen, zum Beispiel:

.box {
  border-top: 1px solid black;
}

Die einzelnen Eigenschaften umfassen die border-width, border-style und border-color Kurzform-Eigenschaften:

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Es gibt auch Langform-Eigenschaften für Breite, Stil und Farbe für jede der vier Seiten:

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

Es gibt eine Vielzahl von Stilen, die Sie für Ränder verwenden können. Im folgenden Beispiel haben wir zwei verschiedene Randstile für die Box und zwei verschiedene Randstile für die Überschrift verwendet. Experimentieren Sie mit dem Randstil, der Breite und der Farbe, um zu sehen, wie Ränder funktionieren.

<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>

* {
  padding: 0.2em;
}
.box {
  width: 500px;
  background-color: #567895;
  border: 5px solid #0b385f;
  border-bottom-style: dashed;
  color: #fff;
}

h2 {
  border-top: 2px dotted rebeccapurple;
  border-bottom: 1em double rgb(24 163 78);
}

Sie können einer Box mit der border-radius-Eigenschaft und den zugehörigen Langformen, die sich auf jede Ecke der Box beziehen, abgerundete Ecken hinzufügen. Zwei Längen oder Prozentsätze können als Wert verwendet werden, wobei der erste Wert den horizontalen Radius definiert und der zweite den vertikalen Radius. In vielen Fällen geben Sie nur einen Wert an, der für beide verwendet wird.

Zum Beispiel, um allen vier Ecken einer Box einen Radius von 10px zu geben:

.box {
  border-radius: 10px;
}

Oder um der oberen rechten Ecke einen horizontalen Radius von 1em und einen vertikalen Radius von 10% zu geben:

.box {
  border-top-right-radius: 1em 10%;
}

Im folgenden Beispiel haben wir alle vier Ecken festgelegt und dann die Werte für die obere rechte Ecke geändert, um sie unterschiedlich zu gestalten. Sie können mit den Werten experimentieren, um die Ecken zu ändern. Auf der Eigenschaftsseite von border-radius sehen Sie die verfügbaren Syntaxoptionen. Der border-radius-Generator kann verwendet werden, um Ihnen abgerundete Eckwerte auszugeben.

<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>

.box {
  width: 500px;
  height: 110px;
  padding: 0.5em;
  border: 10px solid rebeccapurple;
  border-radius: 1em;
  border-top-right-radius: 10% 30%;
}

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Hintergründe und Ränder.

Sie sehen, dass es ziemlich viel gibt, wenn Sie einem Kasten einen Hintergrund oder einen Rand hinzufügen. Erkunden Sie die verschiedenen Eigenschaftsseiten, wenn Sie mehr über eines der hier besprochenen Merkmale erfahren möchten. Auf fast jeder Seite auf MDN gibt es Beispiele, mit denen Sie spielen können, um Ihr Wissen zu erweitern.

Im nächsten Artikel werden wir mehr über das Konzept des Überlaufs lernen, das bestimmt, was passiert, wenn zu viel Inhalt vorhanden ist, um in ein Element zu passen.

• Zurück
• Übersicht: Grundlegendes zur CSS-Gestaltung
• Weiter