Atributo background-position-y CSS

Definição e uso

background-position-y A propriedade é usada para definir a posição da imagem de fundo no eixo y.

Dica:Por padrão, a imagem de fundo será colocada no canto superior esquerdo do elemento e repetida nas direções vertical e horizontal.

Exemplo

Exemplo 1

Como posicionar a imagem de fundo no eixo y:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

Experimente você mesmo

Exemplo 2

Como posicionar a imagem de fundo no topo:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

Experimente você mesmo

Exemplo 3

Como usar porcentagem para localizar a imagem de fundo no eixo y:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

Experimente você mesmo

Exemplo 4

Como usar pixels para localizar a imagem de fundo no eixo y:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

Experimente você mesmo

Sintaxe CSS

background-position-y: value;

valor do atributo

Valor Descrição
top localiza o fundo no topo do eixo y.
bottom localiza o fundo no fundo do eixo y.
center localiza o fundo no centro do eixo y.
y%

o topo do eixo y é 0%, o fundo é 100%.

percentuais de altura referem-se à altura da área de localização do fundo menos a altura da imagem de fundo.

ypos

é a distância vertical do topo.

As unidades podem ser pixels (como 0px) ou outras Unidades CSS.

ypos offset

sintaxe de dois valores, suportada apenas no Firefox e Safari.

  • ypos configurado como top ou bottom.
  • offset é a distância vertical entre a imagem de fundo e o topo ou fundo configurados por ypos.

As unidades podem ser pixels (como 0px) ou outras Unidades CSS.

initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: 0%
Herança: não
Produção de animação: suportado. Veja:propriedades relacionadas a animação.
Versão: CSS3
Sintaxe JavaScript: object.style.backgroundPositionY="center"

Suporte do navegador

Os números na tabela representam a versão do navegador que suportou plenamente essa propriedade.

Chrome Edge Firefox Safari Opera
sintaxe de um valor 1.0 12.0 49.0 1.0 15.0
sintaxe de dois valores não suportado não suportado 49.0 15.4 não suportado

Páginas relacionadas

Tutorial:Fundo CSS

Referência CSS:propriedade background-image

Referência CSS:propriedade background-position

Referência CSS:propriedade background-position-x

Referência HTML DOM:propriedade backgroundPosition