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

background-attachment: scroll

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

Tämän sivun tarkoitus on havainnollistaa taustakuvan vierittymistä suhteessa 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 × 400) DIV-elementille seuraavilla arvoilla:

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

Odotettu lopputulos?

CSS-spesifikaation (2.1) mukaan vieritettävä taustakuva (background-attachment:scroll) vierittyy selainikkunan vierityspalkkien mukaan. 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 vierittyy vain selainikkunan vierityspalkkien mukana.

Aiheeseen liittyviä sivuja

Dokumentin julkaisupäivämäärä: 2012-01-03.
Osmo Saarikumpu