Propriedade CSS background

A propriedade CSS background é uma forma abreviada (shorthand) utilizada para definir todas as propriedades de estilo do fundo. A propriedade background inclui as seguintes propriedades:

background-color, que é utilizada para definir uma cor de fundo.
background-image, que é utilizada para definir uma ou várias imagens de fundo para um elemento.
background-repeat, que é utilizada para controlar a repetição de um elemento.
background-position, que é utilizada para definir a posição de uma imagem de fundo.
background-origin, que é utilizada para definir a área de posicionamento do fundo, ou seja, a posição de uma imagem colocada através da propriedade background-image.
background-clip, que é utilizada para estender a imagem ou a cor de fundo até por baixo da sua borda.
background-attachment, que é utilizada para definir se a imagem de fundo é fixa ou se faz scroll juntamente com o resto da página.
background-size, que é utilizada para definir o tamanho da imagem de fundo.

Se uma das propriedades na propriedade abreviada background for background-size, deve utilizar-se uma barra (/) para a separar de background-position.

Quando se utilizam várias fontes de background-image mas também é necessário um background-color, este deve ser indicado por último na lista.

Valor inicial	Ver as propriedades individuais.
Aplica-se a	Todos os elementos. Aplica-se também a ::first-letter.
Herdada	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

Sintaxe da propriedade CSS background

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

Exemplo da propriedade background:

Exemplo da propriedade CSS background color

<!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

Exemplo da propriedade background com uma imagem aplicada:

Exemplo da propriedade CSS background image

<!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 »

Veja outro exemplo com a propriedade background, no qual são aplicados os valores de background-color, background-image, background-repeat e background-attachment.

Exemplo da propriedade background com diferentes valores:

Exemplo da propriedade CSS background

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #ccc url("/build/images/w3docs-logo-black.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 »

No exemplo seguinte, a propriedade background-size é utilizada para especificar o tamanho do fundo.

Exemplo da propriedade background-size:

Exemplo da propriedade CSS background-size

<!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 »

Aqui, a propriedade background-clip especifica até onde o fundo deve estender-se dentro de um elemento.

Exemplo da propriedade background-clip:

Exemplo da propriedade CSS background-clip

<!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 »

No exemplo seguinte, é utilizada a propriedade background-origin. Faz com que a imagem de fundo comece a partir do canto superior esquerdo do conteúdo.

Exemplo da propriedade background-origin:

Exemplo da propriedade CSS background-origin

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 10px double #ccc;
        padding: 25px;
        background: url("/build/images/w3docs-logo-black.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 com o seu valor predefinido.
inherit	Herda esta propriedade do seu elemento pai.

Prática

What are the properties of CSS background?