>> English << | česky | PortuguêsZVON > Tutorials > CSS2 tutorial
Intro / Search / ZVON
>> Example 23 << | Prev | Next | Index | Contents

Property background-attachment with value fixed prevents the scrolling of the background image. Compare 1 and 2.

XML SourceCSS stylesheetExample link
(1)
     <AAA>
          <html:p>aaaa</html:p>
          <html:p>bbbb</html:p>
          <html:p>cccc</html:p>
          <html:p>dddd</html:p>
          <html:p>eeee</html:p>
          <html:p>ffff</html:p>
          <html:p>gggg</html:p>
          <html:p>hhhh</html:p>
          <html:p>iiii</html:p>
          <html:p>jjjj</html:p>
          <html:p>kkkk</html:p>
          <html:p>llll</html:p>
          <html:p>oooo</html:p>
          <html:p>pppp</html:p>
          <html:p>qqqq</html:p>
          <html:p>rrrr</html:p>
          <html:p>ssss</html:p>
          <html:p>tttt</html:p>
          <html:p>uuuu</html:p>
          <html:p>vvvv</html:p>
          <html:p>wwww</html:p>
          <html:p>xxxx</html:p>
          <html:p>yyyy</html:p>
          <html:p>zzzz</html:p>
          <html:p>1111</html:p>
          <html:p>2222</html:p>
          <html:p>3333</html:p>
          <html:p>4444</html:p>
          <html:p>5555</html:p>
          <html:p>6666</html:p>
          <html:p>7777</html:p>
          <html:p>8888</html:p>
          <html:p>9999</html:p>
          <html:p>aaaa</html:p>
          <html:p>bbbb</html:p>
          <html:p>cccc</html:p>
          <html:p>dddd</html:p>
          <html:p>eeee</html:p>
          <html:p>ffff</html:p>
          <html:p>gggg</html:p>
          <html:p>hhhh</html:p>
          <html:p>iiii</html:p>
          <html:p>jjjj</html:p>
          <html:p>kkkk</html:p>
          <html:p>llll</html:p>
          <html:p>oooo</html:p>
          <html:p>pppp</html:p>
          <html:p>qqqq</html:p>
          <html:p>rrrr</html:p>
          <html:p>ssss</html:p>
          <html:p>tttt</html:p>
          <html:p>uuuu</html:p>
          <html:p>vvvv</html:p>
          <html:p>wwww</html:p>
          <html:p>xxxx</html:p>
          <html:p>yyyy</html:p>
          <html:p>zzzz</html:p>
          <html:p>1111</html:p>
          <html:p>2222</html:p>
          <html:p>3333</html:p>
          <html:p>4444</html:p>
          <html:p>5555</html:p>
          <html:p>6666</html:p>
          <html:p>7777</html:p>
          <html:p>8888</html:p>
          <html:p>9999</html:p>
     </AAA>
AAA {background-image:url("../Pictures/zvon.gif")}
AAA {background-repeat:repeat-x}
AAA {background-position: top}
View output
XML SourceCSS stylesheetExample link
(2)
     <AAA>
          <html:p>aaaa</html:p>
          <html:p>bbbb</html:p>
          <html:p>cccc</html:p>
          <html:p>dddd</html:p>
          <html:p>eeee</html:p>
          <html:p>ffff</html:p>
          <html:p>gggg</html:p>
          <html:p>hhhh</html:p>
          <html:p>iiii</html:p>
          <html:p>jjjj</html:p>
          <html:p>kkkk</html:p>
          <html:p>llll</html:p>
          <html:p>oooo</html:p>
          <html:p>pppp</html:p>
          <html:p>qqqq</html:p>
          <html:p>rrrr</html:p>
          <html:p>ssss</html:p>
          <html:p>tttt</html:p>
          <html:p>uuuu</html:p>
          <html:p>vvvv</html:p>
          <html:p>wwww</html:p>
          <html:p>xxxx</html:p>
          <html:p>yyyy</html:p>
          <html:p>zzzz</html:p>
          <html:p>1111</html:p>
          <html:p>2222</html:p>
          <html:p>3333</html:p>
          <html:p>4444</html:p>
          <html:p>5555</html:p>
          <html:p>6666</html:p>
          <html:p>7777</html:p>
          <html:p>8888</html:p>
          <html:p>9999</html:p>
          <html:p>aaaa</html:p>
          <html:p>bbbb</html:p>
          <html:p>cccc</html:p>
          <html:p>dddd</html:p>
          <html:p>eeee</html:p>
          <html:p>ffff</html:p>
          <html:p>gggg</html:p>
          <html:p>hhhh</html:p>
          <html:p>iiii</html:p>
          <html:p>jjjj</html:p>
          <html:p>kkkk</html:p>
          <html:p>llll</html:p>
          <html:p>oooo</html:p>
          <html:p>pppp</html:p>
          <html:p>qqqq</html:p>
          <html:p>rrrr</html:p>
          <html:p>ssss</html:p>
          <html:p>tttt</html:p>
          <html:p>uuuu</html:p>
          <html:p>vvvv</html:p>
          <html:p>wwww</html:p>
          <html:p>xxxx</html:p>
          <html:p>yyyy</html:p>
          <html:p>zzzz</html:p>
          <html:p>1111</html:p>
          <html:p>2222</html:p>
          <html:p>3333</html:p>
          <html:p>4444</html:p>
          <html:p>5555</html:p>
          <html:p>6666</html:p>
          <html:p>7777</html:p>
          <html:p>8888</html:p>
          <html:p>9999</html:p>
     </AAA>
AAA {background-image:url("../Pictures/zvon.gif")}
AAA {background-repeat:repeat-x}
AAA {background-position: top}
AAA {background-attachment: fixed}
View output