:: A propriedade background ::

O fundo dos elementos HTML

A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML.

As propriedades background são as listadas abaixo:

background-color............... cor do fundo;
background-image............. imagem de fundo;
background-repeat............. maneira como a imagem de fundo é posicionada;
background-attachment.......se a imagem de fundo "rola" ou não com a tela;
background-position............como e onde a imagem de fundo é posicionada;
background........................maneira abreviada para todas as propriedades;

Valores válidos para as propriedades do fundo

background-color:
1. código hexadecimal: #FFFFFF
2. código rgb: rgb(255,235,0)
3. nome da cor: red, blue, green...etc
4. transparente: transparent
background-image:
1. URL: url(caminho/imagem.gif)
background-repeat:
1. não repete: no-repeat
2. repete vertical e horizontal: repeat
3. repete vertical: repeat-y
4. repete horizontal: repeat-x
background-attachment:
1. imagem fixa na tela: fixed
2. imagem "rola" com a tela: scroll
background-position:
1. x-pos y-pos
2. x-% y-%
3. top left
4. top center
5. top right
6. center left
7. center center
8. center right
9. bottom left
10. bottom center
11. bottom right

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.

A cor do fundo

<html>
<head>
<style type="text/css">
<!--
body {background-color: #CCFFFF;} /*azul claro*/
h2 {background-color: #FF0000;}   /* vermelho */
p {background-color: #00FF00;}    /*  verde   */
-->
</style>
</head>
<body>
<h2>Estude CSS</h2>
<p>Com CSS você controla melhor seu layout</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Estude CSS

Com CSS você controla melhor seu layout

A imagem de fundo

<html>
<head>
<style type="text/css">
<!--
body { background-image: url("/images/css.gif");}
-->
</style>
</head>
<body>
</body>
</html>

Este é o efeito da folha de estilo acima:

Repetir verticalmente a imagem de fundo

<html>
<head>
<style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: repeat-y;
}
-->
</style>
</head>
<body>
</body>
</html>

Este é o efeito da folha de estilo acima:

Repetir horizontalmente a imagem de fundo

<html>
<head>
style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: repeat-x;
}
-->
</style
</head>
<body>
</body>
</html>

Este é o efeito da folha de estilo acima:

Posicionar uma imagem de fundo

<html>
<head>
<style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: no-repeat;
background-position: 200px 70px; 
}
-->
</style>
</head>
<body>
</body>
</html>

Este é o efeito da folha de estilo acima: a imagem esta posicionada a 200 pixel da margem esquerda e 70 pixel da margem superior

Ajustar uma imagem de fundo fixa, que não "rola" com a tela.

<html>
<head>
<style type="text/css">
<!--
body {
background-image: url("/images/css.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
-->
</style>
</head>
<body>
</body>
</html>

Este é o efeito da aplicação das regras CSS acima em uma página web.

Todas as propriedades do fundo em uma declaração única

Esta é a maneira abreviada de você escrever uma regra para as propriedades do fundo.

Você pode declarar todas ou algumas das propriedades estudadas em uma regra única:

A sintaxe geral é esta:
background: color image repeat attachment position;
em qualquer ordem, podendo ser omitido um mais valores.

Veja o exemplo abaixo:

<html>
<head>>
<style type="text/css">/>
<!--
body { 
background: #00FF00 url("css.gif")
no-repeat fixed 200px 70px;
}
--> 
</style>
</head>

Você poder fazer uso de um excelente editor para a propriedade background e descobrir mais efeitos para complementar este tutorial, nesta página interativa.