Hintergründe und Rahmen

Hintergrundfarben

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

Im Beispiel unten 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 beliebigen 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%);
}

Hintergrundbilder

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 Merkmale von Hintergrundbildern. Standardmäßig wird das große Bild nicht verkleinert, um in die Box zu passen, sodass wir nur eine kleine Ecke 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 #cccccc;
  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, dann wird das Bild über der Farbe angezeigt. Versuchen Sie, eine background-color-Eigenschaft zum obigen Beispiel hinzuzufügen, um das in Aktion zu sehen.

Steuerung der Hintergrundwiederholung

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

• no-repeat — verhindert, dass der Hintergrund überhaupt wiederholt wird.
• repeat-x — wiederholt horizontal.
• repeat-y — wiederholt vertikal.
• repeat — der Standard; wiederholt in beide Richtungen.
• space — wiederholt so oft wie möglich, fügt jedoch zwischen den Bildern Platz hinzu, wenn zusätzlicher Platz verfügbar ist.
• round — ähnlich wie space, dehnt jedoch die Bilder aus, um zusätzlichen Platz zu füllen.

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

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

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

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

Größe des Hintergrundbildes

Das zuerst genutzte Hintergrundbild balloons.jpg ist ein großes Bild, das aufgrund seiner Größe im Verhältnis zum Element beschnitten wurde. In diesem Fall können wir die background-size-Eigenschaft verwenden, um die Größe des Bildes an die Hintergrundgröße anzupassen.

background-size kann zwei <length>- oder <percentage>-Werte zur Angabe der Bildgröße in horizontaler und vertikaler Richtung annehmen oder die folgenden Schlüsselwörter:

• cover — der Browser vergrößert das Bild gerade so weit, dass es die Box vollständig bedeckt, während das Seitenverhältnis beibehalten wird. In diesem Fall wird wahrscheinlich ein Teil des Bildes außerhalb der Box enden.
• contain — der Browser sorgt dafür, dass das Bild die passende Größe hat, um in die Box zu passen. In diesem Fall könnten auf beiden Seiten oder oben und unten des Bildes Lücken entstehen, wenn das Seitenverhältnis des Bildes von dem der Box abweicht.

Spiel mit background-size

Im Beispiel unten wurde dem balloons.jpg Bild Längeneinheiten zugewiesen, damit es in die Box passt. 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 verändern.
• Entfernen Sie die Längeneinheiten und testen Sie, was passiert, wenn Sie background-size: cover oder background-size: contain verwenden.
• Verkleinern Sie das Bild auf eine Größe 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 #cccccc;
  margin: 10px;
}

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

Positionierung des Hintergrundbildes

Die background-position-Eigenschaft ermöglicht es Ihnen, die Position zu wählen, an der das Hintergrundbild auf der Box, auf die es angewendet wird, erscheint. Dies nutzt 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 ist.

Die gebräuchlichsten background-position-Werte bestehen aus zwei einzelnen Werten — einem 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 Seite für background-position an):

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

Sie können auch Längen und Prozentsätze verwenden:

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

Sie können auch Schlüsselwert und Längen- oder Prozentsätze mischen, wobei sich der erste Wert auf die horizontale Position und der zweite auf die vertikale Position bezieht. Zum Beispiel:

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

Schließlich können Sie auch eine Vier-Wert-Syntax verwenden, um einen Abstand von bestimmten Kanten der Box anzugeben. Jedes Wertepaar stellt die Boxkante dar, von der aus gemessen wird, und die Größe des Offsets von dieser Kante. Im untenstehenden Snippet positionieren wir den Hintergrund 20px vom top und 10px von der right entfernt:

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

Spiel mit background-position

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

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

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

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

Hintergrundverläufe

Ein Verlauf — wenn er als Hintergrund verwendet wird — verhält sich wie ein Bild und wird ebenfalls mit der background-image-Eigenschaft gesetzt.

Auf der MDN-Seite für den <gradient>-Datentyp können Sie mehr über die verschiedenen Arten von Verlaufswerten und die Möglichkeiten, die Sie damit haben, erfahren.

Probieren Sie einige verschiedene Verlaufswerte im untenstehenden Beispiel aus. Zuerst haben wir einen linearen Verlauf, der sich über die gesamte erste Box erstreckt, und einen radialen Verlauf mit einer festgelegten Größe, der sich im zweiten Kasten wiederholt.

<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 #cccccc;
  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;
}

Mehrere Hintergrundbilder

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

Wenn Sie dies tun, können Sie mehrere Hintergrundbilder übereinander liegen haben. Die Hintergründe werden so gestapelt, dass das zuletzt angegebene Hintergrundbild unten im Stapel liegt, und jedes vorherige Bild auf dem folgt, was im Code danach kommt.

Die anderen background-* Eigenschaften können ebenfalls kommagetrennte Werte haben, genau wie background-image:

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 passt zu den Werten in derselben Position in den anderen Eigenschaften. Oben wird zum Beispiel image1 der background-repeat Wert no-repeat zugewiesen. Aber was passiert, wenn verschiedene Eigenschaften unterschiedliche Anzahlen von Werten haben? Die Antwort ist, dass die geringere Anzahl von Werten zyklisch verwendet werden — im obigen Beispiel gibt es vier Hintergrundbilder, aber nur zwei background-position Werte. Die ersten beiden Positionswerte werden auf die ersten beiden Bilder angewendet, dann wird zurückgegangen — image3 wird der erste Positionswert zugewiesen, und image4 der zweite Positionswert.

Spiel mit mehreren Hintergrundbildern

Lassen Sie uns spielen. Das untenstehende Beispiel enthält zwei Hintergrundbilder. Versuchen Sie, das Beispiel folgendermaßen zu bearbeiten:

• Um die Stapelreihenfolge zu demonstrieren, versuchen Sie, die Reihenfolge zu ändern, in der die Hintergrundbilder in der Liste erscheinen.
• Fügen Sie einige andere background-* Eigenschaften hinzu, um die Position, Größe oder den Wiederholungswert der Bilder zu ändern.
• Versuchen Sie, einen Verlauf 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 #cccccc;
  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");
}

Hintergrundanhang

Eine weitere Option, die wir für Hintergründe zur Verfügung haben, ist die Festlegung, wie sie gescrollt werden, wenn der Inhalt scrollt. Dies wird durch die background-attachment-Eigenschaft gesteuert, die die folgenden Werte annehmen kann:

• scroll: bewirkt, dass der Hintergrund des Elements gescrollt wird, wenn die Seite gescrollt wird. Wenn der Inhalt des Elements gescrollt wird, bewegt sich der Hintergrund nicht. Der Hintergrund ist sozusagen auf die gleiche Position der Seite fixiert, sodass er beim Scrollen der Seite scrollt.
• fixed: bewirkt, dass der Hintergrund eines Elements fixiert im Ansichtsfenster bleibt, sodass er nicht scrollt, wenn die Seite oder der Elementinhalt gescrollt wird. Er bleibt immer an derselben Position auf dem Bildschirm.
• local: fixiert den Hintergrund an das Element, auf das er gesetzt ist, sodass der Hintergrund mit dem Element scrollt, wenn es gescrollt wird.

Die background-attachment-Eigenschaft hat nur Auswirkung, wenn es Inhalt gibt, der gescrollt werden kann. Wir haben eine Demo erstellt, um die Unterschiede zwischen den drei Werten zu demonstrieren — schauen Sie sich background-attachment.html (auch den Quellcode ansehen hier).

Verwendung der Hintergrund-Kurzform

Häufig werden Hintergründe mit der background-Kurzform-Eigenschaft angegeben, mit der Sie alle verschiedenen Eigenschaften auf einmal festlegen können.

Wenn Sie mehrere Hintergründe verwenden, müssen Sie alle Eigenschaften für den ersten Hintergrund angeben, dann Ihren nächsten Hintergrund nach einem Komma hinzufügen. Im untenstehenden Beispiel haben wir einen Verlauf mit Größe und Position, dann ein Hintergrundbild mit no-repeat und einer Position, gefolgt von einer Farbe.

Es gibt ein paar Regeln, die beachtet werden müssen, wenn Sie Hintergrundbild-Kurzformwerte schreiben, zum Beispiel:

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

Sehen 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;
}

Überlegungen zur Zugänglichkeit mit Hintergründen

Wenn Sie Text auf einem Hintergrundbild oder einer Hintergrundfarbe platzieren, sollten Sie darauf achten, dass Sie genügend Kontrast haben, damit der Text für Ihre Besucher lesbar ist. Wenn Sie ein Bild mit Textinhalt darüber spezifizieren, sollten Sie auch eine background-color angeben, die es dem Text ermöglicht, lesbar zu sein, wenn das Bild nicht geladen wird.

Bildschirmleser können Hintergrundbilder nicht einlesen; deshalb sollten sie rein dekorativ sein. Alle wichtigen Inhalte sollten Teil der HTML-Seite sein und nicht in einem Hintergrundbild enthalten sein.

Rahmen

Beim Lernen über das Boxmodell haben wir entdeckt, wie Rahmen die Größe unserer Box beeinflussen. In dieser Lektion schauen wir uns an, wie man Rahmen kreativ verwendet.

Typischerweise, wenn wir einem Element mit CSS Rahmen hinzufügen, verwenden wir die border-Kurzform-Eigenschaft, um die Farbe, Breite und den Stil des Rahmens an allen vier Seiten einer Box in einer Deklaration festzulegen:

.box {
  border: 1px solid black;
}

Oder wir können eine Kante der Box gezielt ansprechen, zum Beispiel:

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

Die einzelnen Eigenschaften beinhalten 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;
}

Spiel mit Rahmen

Es gibt eine Vielzahl von Stilen, die Sie für Rahmen verwenden können. Im Beispiel unten haben wir zwei verschiedene Rahmenstile für die Box und zwei verschiedene Rahmenstile für die Überschrift verwendet. Spielen Sie mit Stil, Breite und Farbe der Rahmen, um zu sehen, wie Rahmen 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: white;
}

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

Abgerundete Ecken

Sie können einer Box mit der border-radius-Eigenschaft und 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 und der zweite den vertikalen Radius definiert. In den meisten Fällen geben Sie nur einen Wert ein, der für beides verwendet wird.

Um allen vier Ecken einer Box beispielsweise einen 10px Radius 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%;
}

Spiel mit dem border-radius

Wir haben alle vier Ecken im Beispiel unten gesetzt und dann die Werte für die obere rechte Ecke geändert, um sie unterschiedlich zu machen. Sie können mit den Werten spielen, um die Ecken zu ändern. Sehen Sie sich die Eigenschaftsseite für border-radius an, um die verfügbaren Syntaxoptionen zu sehen. Der border-radius Generator kann verwendet werden, um abgerundete Eckwerte für Sie 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%;
}

Zusammenfassung

Sie sehen, dass es einiges zu beachten gibt, wenn man einem Kasten einen Hintergrund oder einen Rahmen hinzufügt. Erkunden Sie die verschiedenen Eigenschaftsseiten, wenn Sie mehr über eines der hier besprochenen Merkmale erfahren möchten. Fast jede Seite auf MDN hat Beispiele, mit denen Sie Ihre Kenntnisse spielerisch erweitern können.

Im nächsten Artikel geben wir Ihnen einige Tests, mit denen Sie überprüfen können, wie gut Sie die Informationen, die wir Ihnen über Hintergrund und Rahmen-Styling bereitgestellt haben, verstanden und behalten haben.

• Zurück
• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter