Ganhe dinheiro com o seu site.
Guia e dicas, experimente:
http://ganhar.noble7fix.com
Copyright © 2007 by Noble7fix · All Rights reserved · E-Mail: noble7fix@gmail.com
Propriedade background-repeat - deseja que a sua imagem se repita na sua página então acrescentamos background-repeat e repeat-y indica repetição na vertical.
<html>
<head>
<style type="text/css">
body {
background-image: url("images/dragao.gif"");
background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>
Repetição de imagem na vertical :background-repeat: repeat-y;
Repetição de imagem na horizontal :background-repeat: repeat-x;
<html>
<head>
<style type="text/css">
body {
background-image: url("images/dragao.gif"");
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<style type="text/css">
body {
background-image: url("images/dragao.gif"");
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
Repetição de imagem tanto na horizontal como na vertical :background-repeat: repeat;
<html>
<head>
<style type="text/css">
body {
background-image: url("images/dragao.gif"");
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
A imagem não se repete :background-repeat: no-repeat;
Imagem de fundo fixa / não fixa (fixed/scroll) - background-attachment -
<html>
<head>
<style type="text/css">
body {
background-image: url("images/dragao.gif"");
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
Imagem de fundo fixa
Imagem de fundo não fixa (scroll)
<html>
<head>
<style type="text/css">
body {
background-image: url("images/dragao.gif"");
background-attachment: scroll;
}
</style>
</head>
<body>
</body>
</html>
background-attachment: scroll;
background-attachment: fixed;
Como determinar a posição da imagem de fundo [background-position]
<html>
<head>
<style type="text/css">
body
{ background-image:url("images/dragao.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center; }
</style>
</html>
Para determinar a posição da imagem existem as seguintes propriedades:
1. x-pos y-pos = determinar posição por coordenadas x (horizontal) e y (vertical)
2. x-% y-% = determinar posição através da percentagem
3. top left = topo à esquerda
4. top center = topo ao centro
5. top right = topo à direita
6. center left = centro à esquerda
7. center center = centro
8. center right = centro à direita
9. bottom left = baixo à esquerda
10. bottom center = baixo ao centro
11. bottom right = baixo à direita
Observe a seguinte propriedade background-position:center center; vai determinar a posição ao centro na página da imagem seleccionada
Esta propriedade - background-attachment - vai definir ser que a imagem fique fixa na sua página ou siga o movimento quando faz o scroll isto é rola quando a página é maior que o ecrã na vertical, (na horizontal não tem qualidade nenhuma, nem é aconselhável), o que normalmente acontece em qualquer site.