English | česky | >> Português <<ZVON > Tutorials > CSS2 tutorial
Introdução / Procura / ZVON
>> Exemplo 23 << | Anterior | Próximo | Index | Conteúdos

A propriedade "background-attachment" com o valor "fixed" permite que a imagem não se mova quando se desloca o conteúdo. Compare 1 com 2.

Documento XMLfolha de estilos CSSExemplo de ligação
(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}
Ver resultado
Documento XMLfolha de estilos CSSExemplo de ligação
(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}
Ver resultado