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
selektor {
background-image: url(cesta k obrázku);
}
selektor {
background-image: none;
}
Hodnoty
| Hodnota | Popis |
|---|---|
url |
Cesta k súboru s obrázkom. Názov obrázka môže byť v dvojitých úvodzovkách, jednoduchých úvodzovkách alebo úplne bez úvodzoviek. |
none |
Zruší obrázok pozadia pre element. |
Predvolená hodnota: none.
Príklad
Nastavme obrázok pozadia pomocou background-image,
zakázaním jeho opakovania pomocou vlastnosti
background-repeat:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#elem {
background-color: orange;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Pozrite tiež
-
vlastnosť
background,
ktorá predstavuje skrátenú vlastnosť pre pozadie