A propriedade Background

O Plano de Fundo em CSS

A propriedade Background permite que você controle a cor do plano de fundo de um elemento, configure uma imagem como plano de fundo, e posicione uma imagem em uma página.

 

Propriedade Descrição Valores NN IE W3C
background Uma propriedade estenográfica para configurar todas as propriedades do plano de fundo em uma declaração background-color
background-image
background-repeat background-attachment
background-position
6.0 4.0 CSS1
background-attachment Especifica se uma imagem de plano de fundo é fixa ou rola com o resto da página scroll
fixed
6.0 4.0 CSS1
background-color Configura a cor do plano de fundo de um elemento color-rgb
color-hex
color-name
transparent
4.0 4.0 CSS1
background-image Configura uma imagem como plano de fundo url
none
4.0 4.0 CSS1
background-position Configura a posição inicial de uma imagem de plano de fundo top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
6.0 4.0 CSS1
background-repeat Estabelece se/como uma imagem de plano de fundo será repetida repeat
repeat-x
repeat-y
no-repeat
4.0 4.0 CSS1

Configurar a cor do plano de fundo
Este exemplo demonstra como configurar a cor de fundo para um elemento.

 

<html>
<head>

<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>

</head>
<body>

<h1>Este é título 1</h1>
<h2>Este é título 2</h2>
<p>Este é um parágrafo</p>

</body>
</html>
  

 

 

Configurar uma imagem como plano de fundo
Este exemplo demonstra como configurar uma imagem como plano de fundo.

<html>
<head>

<style type="text/css">
body{
	background-image: url("/images/bgdesert.jpg");
}
</style>

</head>

<body>

</body>
</html>
  

 

Como repetir uma imagem de fundo
Este exemplo demonstra como repetir uma imagem de fundo só verticalmente.

<html>
<head>

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

</head>

<body>

</body>
</html>
  

 

Como posicionar a imagem de fundo
Este exemplo demonstra como posicionar a imagem de fundo numa página.

<html>
<head>

<style type="text/css">
body{ 
	background-image: url("images/smiley.gif");
	background-repeat: no-repeat;
	background-position: center center;
}
</style>

</head>

<body>

</body>
</html>
  

 

Como configurar uma imagem de fundo fixa
Este exemplo demonstra como configurar uma imagem de fundo fixa. A imagem não rolará com o resto da página.

<html>
<head>

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

</head>

<body>

</body>
</html>
  

 

Todas as propriedades do plano de fundo um uma declaração
Este exemplo demonstra como usar a estenografia (shorthand) para configurar todas as propriedades do plano de fundo em uma declaração.

<html>
<head>

<style type="text/css">
body{ 
	background: #00ff00 url("images/smiley.gif") no-repeat fixed center center
}
</style>

</head>

<body>

</body>
</html>
  

 

Este é um artigo básico sobre a propriedade background, em breve estarei postando mais artigos com outras propriedades.
Até mais...