Propriedade Background Origin
Última atualização: 2026-09-13
background-origin Propriedade Background Origin
A propriedade background-origin define a área de referência para o posicionamento da imagem de fundo, determinando a linha de base do background-position. O padrão padding-box posiciona o fundo em relação à área de padding, border-box em relação à área da borda e content-box em relação à área de conteúdo. É frequentemente usada junto com background-clip.
| Categoria | |
|---|---|
| Valor Inicial | padding-box |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
background-origin: border-box | padding-box | content-box;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
border-box | padding-box | content-box | Palavra-chave | Origem de posicionamento do 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-origin | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v3.1 | ✓ v10 |
| Suportado em todos os principais navegadores | |||||
Dica： O background-origin afeta onde a imagem de fundo começa, mas não a área sobre a qual é pintada.
Dica： Quando background-attachment: fixed, o background-origin é ignorado porque o fundo é posicionado em relação à viewport.
❓ Perguntas Frequentes
QComo background-origin e background-clip funcionam juntos?
Aorigin decide de qual box a imagem de fundo é posicionada, enquanto clip decide até onde o fundo é pintado; eles são independentes e podem ser definidos separadamente. Por exemplo, background-origin: content-box; background-clip: border-box; posiciona a imagem a partir da área de conteúdo, mas a pinta até sob a borda. Uma combinação comum é definir ambos com o mesmo valor para que o fundo seja exibido por completo a partir de sua origem.
QQual é o valor padrão de background-origin?
AO padrão é padding-box, o que significa que a imagem de fundo é posicionada a partir do canto superior esquerdo da área de padding (a borda de padding). Isso difere do padrão do background-clip, que é border-box, e essa é a principal razão pela qual os dois são frequentemente confundidos. Quando background-attachment: fixed, o origin é ignorado porque o fundo passa a ser posicionado em relação à viewport.
QQuando o background-origin não tem efeito visível?
ATrês casos: quando a imagem não tem background-position explícito e fica no padrão 0% 0%, você precisa de uma borda para ver qualquer diferença; quando background-attachment: fixed ele é ignorado; e não faz nada com apenas uma cor de fundo (origin afeta apenas imagens). Para ver o efeito, adicione uma borda mais uma imagem de fundo com no-repeat e alterne entre os três valores.
QO que significam os três valores de background-origin?
Aborder-box: a imagem é posicionada a partir do canto superior esquerdo da área da borda e pode se estender sob a borda. padding-box (padrão): é posicionada a partir do canto superior esquerdo da área de padding, então nenhuma imagem aparece sob a borda. content-box: é posicionada a partir do canto superior esquerdo da área de conteúdo, então a imagem fica dentro da área de conteúdo. Junto com background-position, esses valores permitem alinhar uma imagem de fundo a qualquer parte do box.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
