Svojstvo background-image

Svojstvo background-image postavlja pozadinsku sliku elementu. Podrazumevano, slika će popuniti ceo blok svojim kopijama, međutim, ovo ponašanje se može poništiti pomoću svojstva background-repeat.

Sintaksa

cssselektor {
  background-image: url(putanja do slike);
}

cssselektor {
  background-image: none;
}

Vrednosti

Podrazumevana vrednost: none.

Primer

Postavićemo pozadinsku sliku pomoću background-image, zabranivši njeno ponavljanje pomoću svojstva 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;
}

Результат:

Primer

Bez background-repeat pozadinska slika će popuniti ceo blok:

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

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

Результат:

Primer

Možete istovremeno postavljati pozadinsku sliku i zadavati pozadinsku boju pomoću background-color. U ovom slučaju, tamo gde ne bude slike pozadine - biće pozadinska boja:

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

Результат:

Pogledajte takođe