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