Īpašība background-image
Īpašība background-image iestata elementa
fona attēlu. Pēc noklusējuma attēls
izklāsīs visu bloku ar savām kopijām, taču
šo uzvedību var atcelt, izmantojot īpašību
background-repeat.
Sintakse
selektors {
background-image: url(ceļš uz attēlu);
}
selektors {
background-image: none;
}
Vērtības
| Vērtība | Apraksts |
|---|---|
url |
Celš uz attēla failu. Attēla nosaukums var būt pēdiņās, vienpēdiņās vai vispār bez pēdiņām. |
none |
Atceļ fona attēlu elementam. |
Noklusējuma vērtība: none.
Piemērs
Iestatīsim fona attēlu, izmantojot background-image,
aizliegtot tā atkārtošanos, izmantojot īpašību
background-repeat:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Piemērs
Bez background-repeat fona attēls
izklāsīs visu bloku:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Piemērs
Var vienlaicīgi iestatīt fona attēlu
un iestatīt fona krāsu, izmantojot background-color.
Šajā gadījumā tur, kur nebūs fona attēla,
būs fona krāsa:
<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;
}
:
Skatiet arī
-
īpašība
background,
kas ir saīsinājuma īpašība fonam