Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

background-image

background-image-ominaisuudella määritellään elementtien taustakuva. Ominaisuudelle voidaan antaa kolme arvoa:

DOM-viittaus: olio.style.backgroundImage

Esimerkki

Tämän esimerkin toiminnallisuus vaatii tyylitukea.

Tämä on esimerkkielementti, jolle on pyydetty seuraavat tyylimääritykset:

#esimerkkielementti {
background-image:none;
}

Elementin emolle on määritetty background-image-ominaisuuden arvoksi: none.

Huomiot

Taustakuva renderoidaan taustavärin päälle.

Lisätietoja englanniksi

Käytännön sovellus: CSS -kuvan vaihto taustakuvilla

Seuraavassa toteutetaan niin kutsuttu kuvan vaihto vaihtamalla taustakuva toiseen. Vaihto aktivoituu osoitusselektorilla (:hover) ja siihen on lisätty hieman siirtymäefektiä, joka ei sinänsä vaikuta itse kuvan vaihtumiseen:

Merkkaus koostuu tyhjästä DIV-elementistä:

<div id=kuvalohko></div>

Tyyleissä elementtiin viitataan seuraavasti:

#kuvalohko {
/*Lohkon leveys ja korkeus
  (tässä sama kuin kuvilla):*/
width:320px;
height:240px;
background-image:url(1.jpg);
/*Kahden sekunnin (CSS3) siirtymäefekti:*/
transition:2s ease-in;
}
#kuvalohko:hover {
background-image:url(2.jpg);
transition:2s ease-in;
}
CSS 2.1 -ominaisuusreferenssi | CSS 2.1 -taustan ja edustan ominaisuudet