Lastnost background-image

Lastnost background-image določa sliko ozadja elementu. Privzeto bo slika zapolnila celoten blok s svojimi kopijami, vendar je to vedenje mogoče preklicati z lastnostjo background-repeat.

Sintaksa

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

cssselektor {
  background-image: none;
}

Vrednosti

Privzeta vrednost: none.

Primer

Določimo sliko ozadja z background-image, in prepovimo njeno ponavljanje z lastnostjo 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

Brez background-repeat bo slika ozadja zapolnila celoten blok:

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

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

Результат:

Primer

Hkrati je mogoče nastaviti sliko ozadja in barvo ozadja z lastnostjo background-color. V tem primeru bo barva ozadja vidna tam, kjer ni slike ozadja:

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

Результат:

Glejte tudi