Fundo - CSS-Tricks | CSS Almanac 2025

A backgroundpropriedade em CSS permite que você controle o fundo de qualquer elemento (o que pinta abaixo do conteúdo nesse elemento). É uma propriedade abreviada, o que significa que permite que você escreva o que seriam várias propriedades CSS em uma. Como isso:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background é composta por outras oito propriedades:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Você pode usar qualquer combinação dessas propriedades que desejar, em quase qualquer ordem (embora a ordem recomendada na especificação esteja acima). Porém, há uma pegadinha: qualquer coisa que você não especificar na backgroundpropriedade é automaticamente definida como padrão. Então, se você fizer algo assim:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

O fundo será transparente, em vez de vermelho. A correção é fácil: apenas defina background-colordepois backgroundou apenas use a abreviação (por exemplo background: url(… ) red;)

Fundos Múltiplos

CSS3 adicionou suporte para vários fundos, que se sobrepõem uns aos outros. Qualquer propriedade relacionada aos planos de fundo pode receber uma lista separada por vírgulas, como esta:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Cada valor na lista separada por vírgulas corresponde a uma camada: o primeiro valor é a camada superior, o segundo valor é a segunda camada e a cor de fundo é sempre a última camada.

Receitas

Veja o Pen emBzRd de Timothy Miller (@tjacobdesign) no CodePen.

Suporte para navegador

O suporte varia entre as diferentes propriedades específicas, e cada artigo correspondente no Almanaque tem notas de suporte do navegador exclusivas. No entanto, fundos básicos de uma única cor e imagens únicas funcionam em qualquer lugar, e qualquer coisa que não seja suportada volta para a próxima melhor opção, seja uma imagem ou uma cor.