Atributo background-position-y CSS
- página anterior background-position-x
- Próxima página background-repeat
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; }
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; }
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%; }
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; }
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.
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
- página anterior background-position-x
- Próxima página background-repeat