w3docs logo

CSS-Eigenschaft background

Die CSS-Eigenschaft background ist eine Shorthand-Eigenschaft und erlaubt, alle Eigenschaften des Hintergrundstils festzulegen. Die Eigenschaft background beinhaltet die folgenden Eigenschaften:

Die Eigenschaft background-color wird verwendet, wenn wir die Farbe eines Tag-Hintergrundes ändern möchten.

Die Eigenschaftbackground-image setzt ein oder mehrere Hintergrundbilder für ein Element.

Mit der Eigenschaft background-repeat können wir die wiederholte Position eines Elements steuern.

Wir verwenden die Eigenschaft background-position für die Position des Hintergrundbildes.

Die Eigenschaft background-origin definiert den Hintergrundpositionierungsbereich, der die Position eines Bildes ist, das unter Verwendung der Eigenschaft background-image platziert wird.

Die Eigenschaft background-clip wird verwendet, um Hintergrundbild oder -farbe unter den Rand zu legen.

Die Eigenschaft background-attachment definiert, ob das Hintergrundbild fest ist oder ob es zusammen mit dem Rest der Seite gescrollt wird.

Die Eigenschaft background-size wird zur Definition der Hintergrundbildgröße verwendet.

Anfangswert Individuelle Eigenschaften ansehen.
Gilt für Alle Elemente. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Ja. Background-color, background-position und background-size sind animierbar.
Version CSS1+ new properties in CSS3
DOM Syntax object.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;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      body  {
      background: #8ebf42; 
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft background</h2>
    <p>Hier ist die Hintergrundfarbe auf grün gesetzt.</p>
  </body>
</html>

Hier sehen Sie ein weiteres Beispiel, wo ein Bild mit der Eigenschaft background verwendet wird.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      body  {
      background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft background</h2>
    <p>Hier wird ein Hintergrundbild verwendet.</p>
  </body>
</html>

Sehen Sie ein weiteres Beispiel mit der Eigenschaft background, wo die Werte background-color, background-image, background-repeat und background-attachment verwendet wurden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center; 
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft background</h2>
    <p>In diesem Beispiel wird die Eigenschaft background-color für die Hintergrundfarbe, die Eigenschaft background-image zum Einstellen des Bildes auf den Hintergrund, background-repeat zum Festlegen des nicht zu wiederholenden Bildes, background-attachment zum Festlegen des zu fixierenden Bildes und background-position zum Festlegen des zu zentrierenden Bildes verwendet.</p>
  </body>
</html>

Ein weiteres Beispiel mit der Eigenschaft background-size, die so eingestellt ist, dass sie die Größe des Hintergrunds angibt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft background</h2>
    <p>Hier ist die Größe für den Hintergrund auf 100px eingestellt.</p>
  </body>
</html>

Ein Beispiel mit background-clip. Sie gibt an, wie weit sich der Hintergrund innerhalb eines Elements erstrecken soll.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border: 8px dotted #ccc;
      padding: 25px;
      background: #ccc;
      background-clip: padding-box;  
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft background</h2>
    <div>
      <p>Background-clip in diesem Div-Element ist auf Padding-box eingestellt.</p>
    </div>
  </body>
</html>

Hier ist ein weiteres Beispiel, wo die Eigenschaft background-origin verwendet wird. Dadurch kann das Hintergrundbild von der linken oberen Ecke des Inhalts ausgehen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border: 10px double #ccc;
      padding: 25px;
      background: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
      background-repeat: no-repeat;
      background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft background</h2>
    <p>Hier background-origin: padding-box (voreingestellt) ist gesetzt.</p>
    <div></div>
  </body>
</html>

Werte

Wert Beschreibung
background-color Setzt die Hintergrundfarbe.
background-image Setzt ein oder mehrere Bilder.
background-position Zeigt die Position der Hintergrundbilder an.
background-size Setzt die Größe des Hintergrundbildes.
background-repeat Definiert, wie die Hintergrundbilder wiederholt werden sollen.
background-origin Bestimmt den Positionierungsbereich der Hintergrundbilder.
background-clip Zeigt den Malbereich der Hintergrundbilder an.
background-attachment Bezeichnet, ob das Bild fixiert ist oder nicht.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erzeugt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Was sind die möglichen Werte für die CSS-Eigenschaft 'background'?
❮ Vorige Nächste ❯
Finden Sie das nützlich?