Propriedade CSS background-position-x
A propriedade CSS background-position-x define a posição horizontal de uma background-image. Veja a sintaxe e pratique com exemplos.
A propriedade background-position-x define a posição horizontal (eixo x) de uma imagem de fundo dentro do seu elemento. É a contraparte de background-position-y, que controla a posição vertical. Juntas, elas formam a versão detalhada da abreviação background-position.
Por padrão, uma background-image é posicionada no canto superior esquerdo do elemento e, a menos que background-repeat seja alterado, ladrilhada por todo o elemento. Definir background-position-x permite mover a imagem para a esquerda ou para a direita sem alterar seu posicionamento vertical.
Quando um elemento possui mais de uma imagem de fundo, você pode fornecer a background-position-x uma lista separada por vírgulas — um valor por camada, na mesma ordem em que as imagens são listadas:
/* two background layers, each positioned independently on the x-axis */
background-position-x: left, 20%;Esta página aborda a sintaxe, todos os valores aceitos, como porcentagens e comprimentos são medidos, e exemplos funcionais que você pode executar.
Nota
No CSS moderno, geralmente é mais claro usar a abreviação
background-position, que define os dois eixos de uma vez.background-position-xé mais útil quando você deseja animar ou substituir apenas o eixo horizontal sem alterar a posição vertical.
Valores negativos são válidos — background-position-x: -30px desloca a imagem para além da borda esquerda.
| Valor Inicial | left |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.backgroundPositionX = "right"; |
Sintaxe
Valores de CSS background-position-x
background-position-x: left | center | right | length | percentage | initial | inherit;Exemplo da propriedade background-position-x:
Exemplo de código CSS background-position-x
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 70%;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Resultado
Exemplo da propriedade background-position-x com o valor "center":
Exemplo de CSS background-position-x center
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-x;
background-position-x: center;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Exemplo da propriedade background-position-x com o valor "left":
Exemplo de CSS background-position-x left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: left;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Exemplo da propriedade background-position-x com o valor "length":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 30px;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Como porcentagens e comprimentos são medidos
Uma fonte comum de confusão é a diferença entre porcentagens e comprimentos:
- Um comprimento (
30px,2rem) desloca a borda esquerda da imagem em relação à borda esquerda da área de posicionamento por essa quantidade. - Uma porcentagem alinha o mesmo ponto relativo da imagem com o mesmo ponto relativo da área. Assim,
0%alinha as bordas esquerdas,100%alinha as bordas direitas, e50%centraliza a imagem. É por isso que uma porcentagem maior que0%não simplesmente desloca a imagem por "essa porcentagem da largura" — ela interpola entre as duas bordas.
As palavras-chave são atalhos para essas porcentagens: left = 0%, center = 50%, e right = 100%.
Valores
| Valor | Descrição |
|---|---|
| left | Especifica o alinhamento da borda esquerda da imagem de fundo com a borda esquerda da camada de posição do fundo. |
| center | Especifica o alinhamento do centro da imagem de fundo com o centro da camada de posição do fundo. |
| right | Especifica o alinhamento da borda direita da imagem de fundo com a borda direita da camada de posição do fundo. |
| length | Um deslocamento fixo (por exemplo 30px ou 2rem) da borda esquerda da imagem em relação à borda esquerda da área de posicionamento. Comprimentos negativos são permitidos e movem a imagem para fora da borda esquerda. |
| percentage | Especifica o deslocamento da posição horizontal da imagem de fundo em relação ao contêiner. 0% alinha a borda esquerda da imagem de fundo com a borda esquerda do contêiner, 100% alinha a borda direita da imagem de fundo com a borda direita do contêiner, e 50% centraliza horizontalmente a imagem de fundo. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade de seu elemento pai. |
Suporte dos navegadores
background-position-x é suportada em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. É amplamente disponível, mas como foi padronizada posteriormente à abreviação background-position, prefira a abreviação quando precisar definir os dois eixos e recorra à versão detalhada apenas quando quiser controlar ou animar especificamente o eixo horizontal de forma independente.
Propriedades relacionadas
background-position— a abreviação que define os dois eixos de uma vez.background-position-y— a contraparte vertical desta propriedade.background-image— define a imagem sendo posicionada.background-repeat— controla se e como a imagem é ladrilhada.