W3docs
de
Anmelden

CSS background-Eigenschaft

CSS background ist eine Shorthand-Eigenschaft zum Festlegen aller Hintergrundstile. Mit vielen Beispielen zum Ausprobieren.

Die CSS-Eigenschaft background ist eine Kurzschreibweise (Shorthand), mit der Sie alle Hintergrundstile eines Elements in einer einzigen Deklaration festlegen können, anstatt jede Eigenschaft einzeln zu schreiben. Intern wird sie auf die folgenden Langform-Eigenschaften erweitert:

  • background-color — legt eine einfarbige Hintergrundfarbe fest.
  • background-image — legt ein oder mehrere Hintergrundbilder für ein Element fest.
  • background-repeat — steuert, ob und wie das Hintergrundbild gekachelt wird.
  • background-position — legt die Startposition des Hintergrundbilds fest.
  • background-origin — definiert den Bereich, relativ zu dem das Bild positioniert wird (border-box, padding-box oder content-box).
  • background-clip — definiert, wie weit sich der Hintergrund (Farbe und Bild) innerhalb des Elements erstreckt.
  • background-attachment — definiert, ob der Hintergrund mit der Seite scrollt oder fixiert bleibt.
  • background-size — definiert die Größe des Hintergrundbilds.

Warum die Kurzschreibweise verwenden

Eine einzige background-Zeile ist kürzer und leichter lesbar als fünf oder sechs einzelne Eigenschaften, und die Absicht ist auf einen Blick erkennbar. Es gibt jedoch einen wichtigen Nebeneffekt: Die Kurzschreibweise setzt alle Langform-Eigenschaften, die nicht angegeben werden, auf ihren Ausgangswert zurück. Zum Beispiel setzt background: red; auch ein zuvor gesetztes background-image, background-position usw. zurück. Deklarieren Sie daher die Kurzschreibweise zuerst und etwaige Überschreibungen (wie ein separates background-size) danach.

Reihenfolge und Sonderregeln

Die Werte innerhalb von background können in fast beliebiger Reihenfolge erscheinen, aber zwei Regeln sind wichtig:

  • background-size muss auf background-position folgen, getrennt durch einen Schrägstrich (/). Beispiel: background: url(bg.png) center / cover; — center ist die Position und cover ist die Größe.
  • Bei mehreren überlagerten Hintergrundbildern muss background-color zuletzt stehen, und zwar nur in der letzten Ebene, da die Farbe hinter allen Bildern gemalt wird.
AusgangswertSiehe einzelne Eigenschaften.
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbbarNein.
AnimierbarJa. background-color, background-position und background-size sind animierbar.
VersionCSS1+ neue Eigenschaften in CSS3
DOM-Syntaxobject.style.background = "blue url(img.jpeg) bottom left repeat";

Syntax

background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;

Beispiele

Eine einfache Hintergrundfarbe

Die grundlegendste Verwendung der Kurzschreibweise besteht darin, nur die Hintergrundfarbe festzulegen. Jeder Wert, den die Kurzschreibweise akzeptiert, kann weggelassen werden; die anderen fallen auf ihre Ausgangswerte zurück.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the background color is set to green.</p>
  </body>
</html>
Probier es selbst »

Ergebnis

![CSS background-Eigenschaft](/uploads/media/default/0001/03/5774b8353b8a0b810579a25a3cdcc2580213b1ff.png "CSS background property result" =420x)

Ein Hintergrundbild verwenden

Sie können eine url() an die Kurzschreibweise übergeben, um ein Bild in den Hintergrund zu zeichnen.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here a background image is used.</p>
  </body>
</html>
Probier es selbst »

Mehrere Werte kombinieren

Dieses Beispiel legt Farbe, Bild, Wiederholungsverhalten, Anheftung und Position in einer einzigen Deklaration fest. Das Bild ist zentriert, wird nicht wiederholt und bleibt beim Scrollen der Seite fixiert.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>In this example background property specifies the background-color, the background-image property to set the image to the background, background-repeat to specify the image to be non repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in center.</p>
  </body>
</html>
Probier es selbst »

Die Hintergrundgröße festlegen

Da background-size nicht ohne einen Schrägstrich mit dem Rest der Kurzschreibweise kombiniert werden kann, ist es oft übersichtlicher, es in einer eigenen Zeile nach der Kurzschreibweise zu setzen. Hier skaliert cover das Bild so, dass es das gesamte Element ausfüllt.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the size for the background is set to cover.</p>
  </body>
</html>
Probier es selbst »

Den Hintergrund beschneiden

Die Eigenschaft background-clip steuert, wie weit der Hintergrund innerhalb des Elements gezeichnet wird. Mit padding-box endet der Hintergrund an der Innenkante des Rahmens, sodass er nicht durch einen gepunkteten oder gestrichelten Rahmen durchscheint.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 8px dotted #ccc;
        padding: 25px;
        background: #ccc;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <div>
      <p>The background-clip for this div element is set to padding-box.</p>
    </div>
  </body>
</html>
Probier es selbst »

Den Hintergrundursprung positionieren

Die Eigenschaft background-origin legt den Bereich fest, relativ zu dem das Bild positioniert wird. Mit padding-box (dem Standardwert) beginnt das Bild an der Innenkante des Rahmens.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 10px double #ccc;
        padding: 25px;
        background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here background-origin: padding-box (default) is set.</p>
    <div></div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibung
background-colorLegt die Hintergrundfarbe fest.
background-imageLegt ein oder mehrere Bilder fest.
background-positionGibt die Position der Hintergrundbilder an.
background-sizeLegt die Größe des Hintergrundbilds fest.
background-repeatGibt an, wie die Hintergrundbilder wiederholt werden.
background-originGibt den Positionierungsbereich der Hintergrundbilder an.
background-clipGibt den Zeichenbereich der Hintergrundbilder an.
background-attachmentGibt an, ob das Bild fixiert ist oder nicht.
initialSetzt diese Eigenschaft auf ihren Standardwert.
inheritErbt diese Eigenschaft vom übergeordneten Element.

Verwandte Eigenschaften

Wenn Sie eine feinere Kontrolle benötigen, verwenden Sie die einzelnen Langform-Eigenschaften:

Übung

Übung
Was sind die Eigenschaften von CSS background?
Was sind die Eigenschaften von CSS background?
Was this page helpful?