Eigenschap background-image

De eigenschap background-image specificeert een achtergrondafbeelding voor een element. Standaard zal de afbeelding het volledige blok vullen met haar kopieën, echter, dit gedrag kan worden uitgeschakeld met de eigenschap background-repeat.

Syntaxis

cssselector {
  background-image: url(pad naar afbeelding);
}

cssselector {
  background-image: none;
}

Waarden

Standaardwaarde: none.

Voorbeeld

Laten we een achtergrondafbeelding instellen met background-image, en het herhalen ervan uitschakelen met de eigenschap 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;
}

Результат:

Voorbeeld

Zonder background-repeat zal de achtergrondafbeelding het volledige blok vullen:

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

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

Результат:

Voorbeeld

Je kunt gelijktijdig een achtergrondafbeelding instellen en een achtergrondkleur instellen met background-color. In dit geval, waar de achtergrondafbeelding niet is, zal de achtergrondkleur zichtbaar zijn:

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

Результат:

Zie ook