Egenskaben background-image

Egenskaben background-image angiver et baggrundsbillede for et element. Som standard vil billedet udfylde hele blokken med kopier af sig selv, men dette behavior kan deaktiveres ved hjælp af egenskaben background-repeat.

Syntaks

cssselektor {
  background-image: url(sti til billedet);
}

cssselektor {
  background-image: none;
}

Værdier

Standardværdi: none.

Eksempel

Lad os angive et baggrundsbillede ved hjælp af background-image, og forbyde dens gentagelse ved hjælp af egenskaben 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;
}

Результат:

Eksempel

Uden background-repeat vil baggrundsbilledet udfylde hele blokken:

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

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

Результат:

Eksempel

Du kan samtidig angive et baggrundsbillede og angive en baggrundsfarve ved hjælp af background-color. I dette tilfælde, hvor der ikke er noget baggrundsbillede, vil baggrundsfarven blive vist:

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

Результат:

Se også