Propriedade CSS background-position-y
A propriedade CSS background-position-y define a posição vertical de uma imagem de fundo. Veja exemplos e experimente você mesmo.
A propriedade CSS background-position-y define a posição vertical de uma imagem de fundo dentro do seu elemento. Ela é a metade vertical da abreviação background-position: enquanto background-position aceita tanto um valor horizontal quanto um vertical, background-position-y controla apenas o posicionamento para cima/baixo, deixando o posicionamento esquerda/direita para background-position-x.
Você a utiliza quando deseja ajustar verticalmente uma imagem de fundo sem precisar redeclarar o valor horizontal — por exemplo, fixando uma marca d'água na parte inferior de uma seção hero, ou ajustando com precisão onde um padrão começa. Quando um elemento possui múltiplas imagens de fundo, você pode fornecer um valor por camada, separados por vírgulas, e cada valor é associado à imagem correspondente.
O deslocamento vertical é medido em relação à área de posicionamento do fundo (por padrão, a caixa de padding do elemento). Um comprimento é contado a partir da borda superior para baixo; uma porcentagem alinha pontos correspondentes na imagem e na área (veja Valores abaixo).
Valores negativos são válidos — background-position-y: -20px desloca a imagem para cima, além da borda superior.
| Valor Inicial | top |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.backgroundPositionY = "bottom"; |
Sintaxe
Valores de CSS background-position-y
background-position-y: top | center | bottom | length | percentage | initial | inherit;Exemplo da propriedade background-position-y com o valor "top":
Exemplo de código CSS background-position-y
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: top;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Resultado
Exemplo da propriedade background-position-y com o valor "bottom":
Exemplo de CSS background-position-y com bottom
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: bottom;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Exemplo da propriedade background-position-y com o valor "center":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: center;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Exemplo da propriedade background-position-y com o valor "length":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: 90px;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Exemplo da propriedade background-position-y com o valor "percentage":
As porcentagens se comportam de forma diferente dos comprimentos. Com um comprimento como 90px, a borda superior da imagem é posicionada 90px abaixo do topo da área. Com uma porcentagem, o ponto em N% da imagem é alinhado com o ponto em N% da área — portanto, 0% equivale a top, 100% equivale a bottom e 50% equivale a center. É isso que faz os valores percentuais manterem uma imagem maior que o container visível, independentemente da altura do container.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: 70%;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| top | Especifica o alinhamento da borda superior da imagem de fundo com a borda superior da camada de posicionamento do fundo. |
| center | Especifica o alinhamento do centro da imagem de fundo com o centro da camada de posicionamento do fundo. |
| bottom | Especifica o alinhamento da borda inferior da imagem de fundo com a parte inferior da camada de posicionamento do fundo. |
| length | Especifica o deslocamento vertical da imagem de fundo a partir da borda superior da camada de posicionamento do fundo. |
| percentage | Especifica o deslocamento vertical da imagem de fundo em relação ao container. 0% alinha a borda superior da imagem de fundo com a borda superior do container, 100% alinha a borda inferior com a borda inferior do container, e 50% centraliza verticalmente a imagem de fundo. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
background-position— define a posição horizontal e vertical juntas em uma única declaração.background-position-x— o equivalente horizontal desta propriedade.- Propriedades CSS3 — visão geral das propriedades introduzidas no CSS3.