Forsiden » Stylesheets » IE 7 oversigt

background-attachment:fixed

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

  1. har et baggrundsbillede, indsat i body-elementet ved hjælp af den formdeklaration, du så herover. Samt
  2. har indsat (næsten) det samme baggrundsbillede i div#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

Understøttede CSS2 selektorer

Understøttede CSS2 egenskaber

Understøttede html-elementer