A propriedade CSS background

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

Introdução

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.

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

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

Exemplos práticos

Vejamos a seguir alguns exemplos práticos.

background-color

HTML
...
<head>
<style rel="stylesheet">/>
  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

background-image

HTML
...
<head>
<style rel="stylesheet">/>
  body { background-image: url("/images/logo-css3.png"); }
</style>
</head>
<body>
</body>
</html>

Este é o efeito da folha de estilo acima:

background-repeat (na vertical)

HTML
...
<head>
<style rel="stylesheet">/>
  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:

background-repeat (na horizontal)

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:

background-position

HTML
...
<head>
<style rel="stylesheet">/>
  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

Atenção: cuidado ao definir a propriedade background-position com uso de valores em porcentagem, pois é indespensável que você esteja ciente de como a posição é calculada nestes casos para não ser surpreendido com "resultado não esperado".

Definir os valores 0% 0% posiciona o canto superior esquerdo da imagem no canto superior esquerdo do box (as coordenadas do canto superior esquerdo tanto da imagem como do box são 0% 0%).

Definir os valores 100% 100% posiciona o canto inferior direito da imagem no canto inferior direito do box (as coordenadas do canto inferior direito tanto da imagem como do box são 100% 100%).

Definir os valores X% Y% posiciona o ponto da imagem cujas coordenadas são X% Y% no ponto do box cujas coordenadas são X% Y% (as coordenadas X% Y% tanto da imagem como do box são X% Y%).

A imagem mostrada a seguir foi copiada da especificação do W3C e esclarece o posicionamento com uso dos valores em porcentagem 75% 50%.

esquema de posicionamneto com porcentagem

background-attachment

HTML
...
<head>
  <style rel="stylesheet">/>
  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.

background (declaração abreviada)

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.

CSS
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 rel="stylesheet">/>
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.

CSS
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

Visite uma página interativa onde você poderá fazer suas experiências com a propriedade CSS background. Bons estudos

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro
ou
vá para a página de entrada nos sites dos livros.

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass