Propriedade CSS background

A propriedade CSS background é uma abreviação que permite definir todos os estilos de fundo de um elemento em uma única declaração, em vez de escrever cada propriedade em uma linha separada. Por trás das cenas, ela expande para as seguintes propriedades individuais:

background-color — define uma cor de fundo sólida.
background-image — define uma ou mais imagens de fundo para um elemento.
background-repeat — controla se e como a imagem de fundo é repetida.
background-position — define a posição inicial da imagem de fundo.
background-origin — define a área em relação à qual a imagem é posicionada (border-box, padding-box ou content-box).
background-clip — define até onde o fundo (cor e imagem) se estende dentro do elemento.
background-attachment — define se o fundo rola junto com a página ou permanece fixo.
background-size — define o tamanho da imagem de fundo.

Por que usar a abreviação

Escrever uma linha com background é mais curto e fácil de ler do que cinco ou seis propriedades separadas, e deixa sua intenção clara de uma só vez. Há um efeito colateral importante a considerar: a abreviação redefine todos os valores individuais de fundo que você não mencionar para o valor inicial. Por exemplo, background: red; também redefine qualquer background-image, background-position etc. que tenha sido definido anteriormente. Por isso, declare a abreviação primeiro e quaisquer substituições (como um background-size separado) depois.

Ordem e regras especiais

Os valores dentro de background podem aparecer em quase qualquer ordem, mas duas regras são importantes:

background-size deve vir após background-position, separado por uma barra (/). Por exemplo: background: url(bg.png) center / cover; — center é a posição e cover é o tamanho.
Quando várias imagens de fundo são sobrepostas, background-color deve vir por último, apenas na camada final, pois a cor é pintada atrás de todas as imagens.

Valor inicial	Veja as propriedades individuais.
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter.
Herdado	Não.
Animável	Sim. background-color, background-position e background-size são animáveis.
Versão	CSS1+ novas propriedades em CSS3
Sintaxe DOM	object.style.background = "blue url(img.jpeg) bottom left repeat";

Sintaxe

background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;

Exemplos

Uma cor de fundo simples

O uso mais básico da abreviação é definir apenas a cor de fundo. Qualquer valor aceito pela abreviação pode ser omitido; os demais voltam aos seus valores iniciais.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the background color is set to green.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

![Propriedade CSS background](/uploads/media/default/0001/03/5774b8353b8a0b810579a25a3cdcc2580213b1ff.png "CSS background property result" =420x)

Usando uma imagem de fundo

Você pode passar um url() para a abreviação para pintar uma imagem no fundo.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here a background image is used.</p>
  </body>
</html>

Experimente Você Mesmo »

Combinando vários valores

Este exemplo define a cor, a imagem, o comportamento de repetição, o anexo e a posição em uma única declaração. A imagem é centralizada, não repetida e fixada enquanto a página é rolada.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>In this example background property specifies the background-color, the background-image property to set the image to the background, background-repeat to specify the image to be non repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in center.</p>
  </body>
</html>

Experimente Você Mesmo »

Definindo o tamanho do fundo

Como background-size não pode ser combinado com o restante da abreviação sem uma barra, é frequentemente mais limpo defini-lo em uma linha separada após a abreviação. Aqui cover dimensiona a imagem para preencher todo o elemento.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the size for the background is set to cover.</p>
  </body>
</html>

Experimente Você Mesmo »

Recortando o fundo

A propriedade background-clip controla até onde o fundo é pintado dentro do elemento. Com padding-box, o fundo para na borda interna da borda, portanto não aparece através de uma borda pontilhada ou tracejada.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 8px dotted #ccc;
        padding: 25px;
        background: #ccc;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <div>
      <p>The background-clip for this div element is set to padding-box.</p>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Posicionando a origem do fundo

A propriedade background-origin define a área em relação à qual a imagem é posicionada. Com padding-box (o padrão), a imagem começa a partir da borda interna do elemento.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 10px double #ccc;
        padding: 25px;
        background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here background-origin: padding-box (default) is set.</p>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
background-color	Define a cor de fundo.
background-image	Define uma ou mais imagens.
background-position	Especifica a posição das imagens de fundo.
background-size	Define o tamanho da imagem de fundo.
background-repeat	Especifica como repetir as imagens de fundo.
background-origin	Especifica a área de posicionamento das imagens de fundo.
background-clip	Especifica a área de pintura das imagens de fundo.
background-attachment	Especifica se a imagem é fixa ou não.
initial	Define esta propriedade para o seu valor padrão.
inherit	Herda esta propriedade do elemento pai.

Propriedades relacionadas

Se precisar de mais controle, use as propriedades individuais:

Prática

Quais são as propriedades do CSS background?