Abreviação de fundo CSS

Propriedade abreviada de fundo CSS

Se você quiser reduzir o código, também pode especificar todas as propriedades de fundo em uma única propriedade. Isso é chamado de atalho.

ao invés de escrever assim:

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Você pode usar o atalho para background:

Exemplo

Use o atalho para definir as propriedades de fundo em uma única declaração:

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

Experimente você mesmo

Quando usar o atalho, a ordem dos valores das propriedades é:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Se falta um valor de propriedade, não importa, apenas configure os outros valores nessa ordem. Observe que, no exemplo acima, não usamos a propriedade background-attachment, pois ela não tem valor.

Todas as propriedades de fundo CSS

Propriedade Descrição
background Atalho para definir todas as propriedades de fundo em uma única declaração.
background-attachment Define se a imagem de fundo é fixa ou se ela rola junto com o resto da página.
background-clip Determina a área de desenho do fundo.
background-color Define a cor de fundo do elemento.
background-image Define a imagem de fundo do elemento.
background-origin Determina onde o imagem de fundo deve ser colocada.
background-position Define a posição de início da imagem de fundo.
background-repeat Define se e como a imagem de fundo se repetirá.
background-size Define o tamanho da imagem de fundo.