Propriedade de Atalho de Fundo
Última atualização: 2026-09-13
background Propriedade de Atalho de Fundo
background é o atalho das propriedades de fundo, permitindo definir a cor, a imagem, a posição, o tamanho e a repetição do fundo, entre outros, em uma única declaração. O atalho mantém o código conciso, e qualquer sub-propriedade omitida é redefinida para seu valor padrão. É um dos atalhos mais usados no CSS.
| Categoria | |
|---|---|
| Valor Inicial | transparent none repeat scroll 0% 0% auto padding-box border-box |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | shadow |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
background: [<bg-color> || <bg-image> || <bg-repeat> || <bg-position> [ / <bg-size> ]? || <bg-attachment> || <bg-clip> || <bg-origin>];⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<bg-layer>*, <final-bg-layer> | Valor | Atalho de fundo |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： No atalho, background-size deve vir depois de background-position, separado por uma barra, por exemplo center/cover.
Aviso： O atalho redefine cada sub-propriedade de fundo não especificada para seu valor inicial, o que pode sobrescrever configurações individuais anteriores.
❓ Perguntas Frequentes
QDevo usar o atalho background ou definir sub-propriedades individualmente?
AO atalho é ideal para definir um fundo completo de uma vez, por exemplo background: #fff url(bg.jpg) no-repeat center/cover; é compacto. As propriedades individuais são mais seguras quando você quer mudar apenas uma sub-propriedade (digamos background-size) sem redefinir as outras. Observe que o atalho redefine as sub-propriedades omitidas para os padrões, então 'atalho primeiro, depois individual' costuma causar surpresas.
QA ordem dos valores no atalho background importa?
AA ordem é bastante flexível porque os navegadores identificam os valores pelo tipo, mas duas regras são obrigatórias: background-size deve vir imediatamente após a posição e ser separado por uma barra (por exemplo center/cover), e background-color deve vir por último. A ordem recomendada é cor, depois imagem, depois repeat, depois posição/tamanho.
QComo faço uma imagem de fundo cobrir o elemento inteiro com o atalho?
AUma linha resolve: background: #333 url(photo.jpg) no-repeat center/cover;. Equivale a definir a cor de fundo, a imagem, no-repeat, o centramento horizontal e vertical e o dimensionamento cover que preenche o contêiner mantendo a proporção. Este é o padrão padrão para fundos de banners e cartões — conciso e difícil de errar.
QQuais sub-propriedades o atalho background redefine?
ATudo o que você não escreve explicitamente é redefinido para seu valor inicial: image para none, repeat para repeat, position para 0% 0%, size para auto, attachment para scroll, clip para border-box e origin para padding-box. Portanto, evite misturar padrões de 'atalho e depois individual' para sub-propriedades de fundo.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
