Eigenschaft background-image

Die Eigenschaft background-image legt ein Hintergrundbild für ein Element fest. Standardmäßig kachelt das Bild mit seinen Kopien den gesamten Block, jedoch kann dieses Verhalten mit der Eigenschaft background-repeat aufgehoben werden.

Syntax

cssSelektor {
  background-image: url(Pfad zum Bild);
}

cssSelektor {
  background-image: none;
}

Werte

Standardwert: none.

Beispiel

Wir legen ein Hintergrundbild mit background-image fest und verbieten seine Wiederholung mit der Eigenschaft background-repeat:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Beispiel

Ohne background-repeat kachelt das Hintergrundbild den gesamten Block:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Beispiel

Man kann gleichzeitig ein Hintergrundbild festlegen und eine Hintergrundfarbe mit background-color festlegen. In diesem Fall wird dort, wo kein Hintergrundbild ist, die Hintergrundfarbe angezeigt:

html<div id="elem"></div>

css#elem {
  background-color: orange;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Siehe auch