Propriedade de Posição do Fundo
Última atualização: 2026-09-13
background-position Propriedade de Posição do Fundo
A propriedade background-position define a posição inicial de uma imagem de fundo dentro de seu elemento, que por padrão é o canto superior esquerdo (0% 0%). Aceita palavras-chave (left, center, right, top, bottom), valores de comprimento e porcentagens. Geralmente é combinada com background-image para posicionar um fundo com precisão.
| Categoria | |
|---|---|
| Valor Inicial | 0% 0% |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | length |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
background-position: <position>{1,4};⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
left | center | right | top | bottom | Palavra-chave | Palavras-chave de posição predefinidas |
<length> | <percentage> | Tipo | Valores de posição explícitos |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-position | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： Com porcentagens, background-position: 100% 100% é equivalente a right bottom.
Dica： Valores negativos podem posicionar uma imagem de fundo fora do elemento, uma técnica comum para CSS sprites.
❓ Perguntas Frequentes
QComo centro uma imagem de fundo?
AUse background-position: center; ou background-position: 50% 50%; — ambos centralizam a imagem horizontal e verticalmente no contêiner, já que a palavra-chave center equivale a 50% 50%. Combine com background-repeat: no-repeat para que a imagem não se repita.
QQual é a diferença entre um e dois valores em background-position?
ACom um valor, a direção não especificada é center por padrão, então background-position: left é equivalente a left center. Com dois valores, o primeiro define o eixo horizontal e o segundo o eixo vertical, por exemplo center top. A sintaxe de deslocamento também é suportada, como right 20px bottom 10px, que posiciona em relação ao canto inferior direito.
QQual é a diferença entre posicionamento por porcentagem e por pixel?
ACom porcentagens, o ponto correspondente da imagem alinha-se com o ponto correspondente do contêiner: 50% 50% alinha o centro da imagem com o centro do contêiner. Com pixels, o canto superior esquerdo da imagem é deslocado por uma quantidade fixa a partir do canto superior esquerdo do contêiner. Use 100% ou right 0 para empurrar a imagem para a direita, e a sintaxe de deslocamento como right 10px para espaçamentos precisos.
QComo uso background-position para CSS sprites?
AUm sprite empacota muitos ícones em uma imagem e usa background-position negativo para deslocar e revelar a fatia necessária. Para ícones de 32px, o segundo é background-position: -32px 0. Ao dimensionar com background-size, converta os deslocamentos correspondentemente. Esta técnica está sendo gradualmente substituída por fontes de ícone e SVG inline.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
