Vlastnosť background-image

Vlastnosť background-image nastavuje obrázok pozadia elementu. V predvolenom nastavení obrázok vyplní celý blok svojimi kópiami, avšak toto správanie je možné zmeniť pomocou vlastnosti background-repeat.

Syntax

cssselektor {
  background-image: url(cesta k obrázku);
}

cssselektor {
  background-image: none;
}

Hodnoty

Predvolená hodnota: none.

Príklad

Nastavme obrázok pozadia pomocou background-image, zakázaním jeho opakovania pomocou vlastnosti 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;
}

Результат:

Príklad

Bez background-repeat obrázok pozadia vyplní celý blok:

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

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

Результат:

Príklad

Je možné súčasne nastaviť obrázok pozadia a nastaviť farbu pozadia pomocou background-color. V tomto prípade tam, kde nebude obrázok pozadia - bude farba pozadia:

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

Результат:

Pozrite tiež