REPETIÇÃO DA IMAGEM PLANO DE FUNDO
A propriedade backgrond-image repete uma imagem na horizontal
e vertical.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("nomedaimagem.png");
}
</style>
</head>
<body>
<h1>primeira página</h1>
<p>repete uma imagem na horizontal e
vertical</p>
</body>
</html>
Se ficar assim a imagem fica estranho.
Se a imagem for repetida somente na horizontal fica melhor.
Usa a propriedade: background-repeat:
repeat-x;
para repetir uma imagem
verticalmente background-repeat:
repeat-y;
Para repetir a imagem na horizontal: background-repeat: repeat-x;
Para repetir a imagem na vertical: background-repeat: repeat-y;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("nomedaimagem.png");
background-repeat:
repeat-x;
}
</style>
</head>
<body>
<h1>Página da web</h1>
<p>Se a imagem for repetida somente na horizontal
fica melhor.</p>
</body>
</html>
FUNDO SEM REPETIÇÃO
Para mostrar a imagem uma usa propriedade
background-repeat: no-repeat;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("nomedaimagem.png");
background-repeat:
no-repeat;
}
</style>
</head>
<body>
<h1>Págian da web</h1>
<p>A imagem do plano de fundo não repete. </p>
</body>
</html>
Posição de fundo do CSS
A propriedade background-position é para posicionar fundo da imagem.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("nomedaimagem.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 150px;
}
</style>
</head>
<body>
<h1>Págian da web</h1>
<p>A imagem de fundo vai ficar no top e a
direita</p>
</body>
</html>