background-attachment: scroll
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:
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.