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

background-attachment: fixed

Huomio! Tämän esimerkin toiminnallisuus vaatii tyylitukea.

Tämän sivun tarkoitus on havainnollistaa taustakuvan kiinnittymistä selainikkunaan, koska ominaisuus on helppo ymmärtää väärin, varsinkin kun se yhdistetään BODY-elementin lapsielementteihin.

Havainnollistava esimerkki

Sivulle on pyydetty seuraavanlainen kuva (tässä 50% pienennettynä ja reunuksilla varustettuna) taustakuvaksi: Esimerkin taustakuva Taustakuva on pyydetty tälle, tätä tekstiä sisältävälle 600-kuvapistettä leveälle DIV-elementille seuraavilla arvoilla:

#sisalto {
/*taustakuva:*/
background-image: url("bg.jpg");
/*oikeaan alanurkkaan:*/
background-position: bottom right;
/*ei toistuvana:*/
background-repeat: no-repeat;
/*kiinnitettynä selainikkunaan:*/
background-attachment: fixed;
}

Odotettu lopputulos?

CSS-spesifikaation (2.1) mukaan kiinnitetty taustakuva (background-attachment:fixed) kiinnitetään selainikkunaan, eikä siis siihen elementtiin johon se on yhdistetty. Tämä seikka voi jäädä helposti hämäräksi, kun taustakuva yhdistetään BODY-elementtiin, koska lopputulos usein vastaa odotuksiamme. Myös jotkut vanhemmat selaimet toimivat tässä spesifikaation vastaisesti.

Mikäli selain siis toimii oikein, niin tähän DIV-elementtiin yhdistetty taustakuva näkyy vain siltä osin kuin tämä DIV risteää selainikkunaan kiinnitetyn taustakuvan kanssa, muiden taustakuvan osien jäädessä piiloon. Oikein leveillä näytöillä taustakuva ei siis näy ollenkaan.

Tässä DIV-elementtiämme voidaan ajatella ikään kuin aukkona, jonka läpi kiinnitetty taustakuva näkyy. Selainikkunan pienennys/suurennus havainnollistanee asiaa edelleen. Voit myös poistaa kiinnityksen vaihtamalla ominaisuuden arvoa:

Aiheeseen liittyviä sivuja

Dokumentin julkaisupäivämäärä: 2011-12-05.
Osmo Saarikumpu