A propriedade CSS2.1 CSS3 background

~~Nota: Este tutorial não aborda as funcionalidades das CSS3 para a propriedade background~~

visualizações (desde 20/04/2015) Publicado em: 10/12/2003 | Atualizações em: 06/06/2014 — 20/04/2015

Na atualização de 2015 deste tutorial foi atualizada também a página interativa destinada às suas experiências com esta propriedade CSS.
Ir para a página interativa atualizada

Estilizando o fundo dos boxes (elementos) HTML

São 8 (oito) as propriedades CSS destinadas a estilizar o fundo de um box HTML. Elas são listadas e descritas sumariamente a seguir.

background-color............... define a cor do fundo;
background-image...............define uma imagem de fundo;
background-repeat............. define a maneira como a imagem de fundo é posicionada;
background-attachment.......define se a imagem de fundo "rola" ou não com a tela;
background-position...........define como e onde a imagem de fundo é posicionada;
background-clip..................define a área do box onde a imagem de fundo é aplicada;
background-origin...............define a posição de origem da imagem no box;
background-size..................define as dimensões da imagem no box;
background.........................maneira abreviada para declarar todas as propriedades anteriores.

Valores válidos para as propriedades destinadas a estilizar o fundo de um box HTML

background-color:
1. código hexadecimal: #ffc6d9
2. código rgb: rgb(255,235,0)
3. código rgba: rgb(255,235,0, 0.7)
4. código hsl: hsl(210,100%,40%)
5. código hsla: hsla(155,80%,35%,0.4)
6. palavra-chave: red, blue, green...etc
7. transparente: transparent
background-image:
1. URL: url(caminho/imagem.gif)
2. URL: url('caminho/imagem.gif')
3. URL: url("caminho/imagem.gif")
4. Gradiente linear: linear-gradient(45deg, blue, red)
5. Gradiente radial: radial-gradient(20px 50px, green, blue, red)

O uso de aspas simples ou duplas no URL da imagem é facultativo

background-repeat:
1. imagem não repete: no-repeat
2. imagem repete na vertical e horizontal: repeat
3. imagem repete na vertical: repeat-y
4. imagem repete na horizontal: repeat-x
5. imagem toca as quatro bordas internas do box e são espaçadas de modo a se distribuirem igualmente: space
6. imagem toca as quatro bordas internas do box e são redimensionadas de modo a preencherem o fundo tocando umas nas outras: round
background-attachment:
1. imagem permanece fixa em relação à viewport (janela do navegador) e não rola juntamente com o conteúdo: fixed
2. imagem não permanece fixa em relação à viewport (janela do navegador) e rola juntamente com o conteúdo - este é o valor padrão: scroll
3. imagem permanece fixa em relação à viewport (janela do navegador) mas quando aplicada ao box de um elemento rola juntamente com o conteúdo se o elemento tiver um mecanismo de rolagem definido por overflow: scroll: local
background-position:
1. Xpx Ypx
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
12. top
13. right
14. bottom
15. left
background-clip:
1. a imagem ocupa até a área das bordas do box, inclusive, se houver uma - este é o comportamento padrão: border-box
2. a imagem ocupa até a área de padding do box, inclusive, se houver uma e não ocupa a área de bordas: padding-box
3. a imagem ocupa até a área de conteúdo do boxe não ocupa as áreas de padding e bordas se houver: content-box
background-origin:
1. a a imagem tem por origem o canto superior esquerdo do box considerada das bordas do box, se houver uma - este é o comportamento padrão: border-box
2. a imagem tem por origem o canto superior esquerdo do box sem considerar as bordas do box, se houver uma: padding-box
3. a imagem tem por origem o canto superior esquerdo do box sem considerar o padding e as bordas do box, se houver: content-box
background-size:
1. a imagem terá as dimensões definidas por unidade de medida CSS: 150px 70px
2. a imagem terá suas dimensões originais - este é o valor padrão: auto
3. a imagem terá as dimensões de modo a que sua maior dimensão ocupe toda a extensão do box e a menor dimensão seja tal que o aspect ratio (relação entre largura e altura) seja preservado: contain
4. a imagem terá as dimensões de modo a que sua menor dimensão ocupe toda a extensão do box e a maior dimensão seja tal que o aspect ratio (relação entre largura e altura) seja preservado: cover

Exemplos práticos

Vamos a seguir analisar alguns exemplos práticos.

A cor do fundo

<html>
<head>
<style type="text/css">
	body {background-color: #cff;} /*azul claro*/
	h2 {background-color: #f00;}   /* vermelho */
	p {background-color: #0f0;}    /*  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/logo-css3.png");}
</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/logo-html5.png");
	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/logo-css3.png");
	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/logo-html5.png");
	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/logo-css3.png");
	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 conforme mostrado a seguir.

seletor {
	background: background-image background-position / background-size background-repeat 
	background-attachment background-origin background-clip background-color;
	} /* se um valor for omitido será considerado o valor padrão */

Observe o exemplo abaixo:

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

Múltiplas imagens de fundo

Podemos definir quantas imagens de fundo quisermos, em um mesmo box, posicionando e dimensionando cada uma delas individualmente.

Cada uma das imagens de fundo definidas para um mesmo box cria um layer com uma coordenada z (como se fosse um z-index) definindo sua visibilidade. Os layers são posicionados em uma pilha de layers colocados uns sobre outros fazendo com que os layers com maior coordenada z se sobreponham àqueles com menor coordenada z.

ordem de empilhamento, ou seja, a coordenada z é definida pela ordem em que a imagem é declarada dentro da regra CSS. A primeira imagem declarada recebe a maior coordenada z, a segunda recebe a segunda maior coordenada e assim por diante até a última imagem declarada que recebe a menor coordenada z. A sintaxe para declarar múltiplas imagens de fundo consiste em separar os valores das propriedades com uma vírgula.

Considere a regra CSS a seguir, destinada a definir três imagens como fundo de um DIV.

div {
  background-image: url(triangulo.png), url(circulo.png), url(retangulo.png);
  background-repeat: repeat-x, no-repeat, repeat-y;
  background-position: right 120px, center, 0 0;
  background-color: #f0c;
	}

Na figura seguinte mostramos a renderização das três imagens (triângulo, círculo e retângulo) e da cor de fundo.

fundo com três imagens