Forsiden » Stylesheets » IE 7 oversigt
background-attachment
bestemmer, om et baggrundsbillede ruller
med websidens indhold (background-attachment: scroll
) eller forbliver
fikseret i browservinduet (background-attachment: fixed
).
Som du ser på denne side, er det en forholdsvis simpel sag at
bruge et sådant baggrundsbillede på body
-markøren
for at få den effekt, du ser uden for artikelrammen, det vil sige
den klart optegnede del af rumfærge-affyringen.
Formdeklarationen for denne effekt alene er:
body { background-image:url(shuttle_3.jpg); background-attachment:fixed; background-position:right bottom ; background-repeat:no-repeat; background-color:#f6f6ff; }
Det, du nok ikke har set før, er at billedet fortsætter ind under artikelrammen i en lidt afdæmpet toning, og at denne del af billedet også er fikseret i browservinduet, mens teksten ruller, når du trækker i rulleskakterne.
Forklaringen på denne særlige og sjældne effekt
skal søges i den særlige natur, som
background-attachment:fixed
har:
background-attachment:fixed
kan påtrykkes ethvert html-element, men fikseringen sker i alle tilfælde i forhold til browservinduet, og ikke til elementet. Påtrykkes et html-element, der kun fylder en mindre del af browservinduet, et sådant baggrundsbillede, vil man kun kunne se baggrundsbilledet i den udstrækning, html-elementet har.
Det, der faktisk sker på denne side er således at jeg
body
-elementet ved
hjælp af den formdeklaration, du så herover. Samtdiv#page
-elementet, som er den boks, der omslutter hele
sidens egentlige indhold. Dette billede er nedtonet eller udtyndet
noget i forhold til originalen.div#page { background-color:#f0f0f0; background-image:url(shuttle_3dim.jpg); background-attachment:fixed; background-position:right bottom ; background-repeat:no-repeat;}
Også det udtyndede billede er fikseret i forhold til
browservinduets nederste højre hjørne, som du ser af
stylesheet'et, men bemærk venligst, at du kun kan se de dele af
dette baggrundsbillede, der er dækket af div#page
-elementets
udstrækning.
Den effekt har vi kunnet lave længe, som Eric Meyer så glimrende har demonstreret på sin webside Complex Spiral Demo. Humlen ved sagen er blot, at effekten ikke har kunnet ses i Internet Explorer, og så går glansen af Skt. Gertrud.
Men ved hjælp af IE 7 har vi altså fået redskabet til at sikre, at denne helt enestående effekt også kan vises i Internet Explorer.
Februar 2005