A propriedade CSS Background-repeat 
No CSS permite mais controle ainda sobre a imagem de fundo, facilitando a maeira como a mesma irá se repetir. A propriedade é background-repeat.Sintaxe:
background-repeat: repeat (default)
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: no-repeat
O valor repeat é default e faz com que a imagem ocupe toda a tela.
O repeat-x faz com que a imagem seja repetida apenas horizontalmente.
Veja no exemplo:
<html>
<head>
<style type="text/css">
<!--
body {
background-image: url('/css.jpg');
background-repeat: repeat-x;
}
-->
</style>
</head>
<body>
</body>
</html>
Veja como fica:
O repeat-y faz com que ela seja repetida apenas verticalmente.
Exemplo:
<html>
<head>
<style type="text/css">
<!--
body {
background-image: url('/css.jpg');
background-repeat: repeat-y;
}
-->
</style>
</head>
<body>
</body>
</html>
Veja como fica:
E no-repeat faz com que a imagem não seja repetida de forma alguma (aparecerá uma imagem apenas no canto superior esquerdo).
.
Para fazer a imagem aparecer em outros lugares, pode-se usar as propriedades de posicionamento do fundo da tela.
Exemplo:
<html>
<head>
<style type="text/css">
<!--
body {
background-image: url('/css.jpg');
background-repeat: no-repeat;
background-position: 200px 70px;
}
-->
</style
></head>
<body>
</body>
</html>
<head>
<style type="text/css">
<!--
body {
background-image: url('/css.jpg');
background-repeat: no-repeat;
background-position: 200px 70px;
}
-->
</style
></head>
<body>
</body>
</html>
Veja como fica:
| < Anterior | Próximo > |
|---|
