Propriedade background-position CSS

Definição e uso

background-position Propriedade que define a posição de início da imagem de fundo.

Esta propriedade define a imagem original de fundo (por background-image O local de definição) do fundo de imagem, se o fundo de imagem precisar ser repetido, ele começará a partir deste ponto.

Dica:Você precisa definir a propriedade background-attachment como "fixed“, para garantir que a propriedade funcione corretamente no Firefox e no Opera.

Veja também:

Tutorial de CSS:Fundo do CSS

Manual de referência do CSS:Propriedade background-image

Manual de referência do HTML DOM:Propriedade backgroundPosition

Exemplo

Como localizar a imagem de fundo:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Experimente você mesmo

Sintaxe do CSS

background-position: value;

Valor da propriedade

Valor Descrição
  • superior esquerdo
  • superior centro
  • superior direito
  • centro esquerdo
  • centro centro
  • centro direito
  • inferior esquerdo
  • inferior centro
  • inferior direito

Se você especificar apenas uma palavra-chave, o segundo valor será "center".

Valor padrão: 0% 0%.
x% y%

O primeiro valor é a posição horizontal, o segundo valor é a posição vertical.

O canto superior esquerdo é 0% 0%. O canto inferior direito é 100% 100%.

Se você especificar apenas um valor, o outro será 50%.
xpos ypos

O primeiro valor é a posição horizontal, o segundo valor é a posição vertical.

O canto superior esquerdo é 0 0. A unidade é pixel (0px 0px) ou qualquer outra unidade CSS.

Se você especificar apenas um valor, o outro será 50%.

Você pode misturar % e valores de position.

Detalhes técnicos

Valor padrão: 0% 0%
Herança: não
Versão: CSS1
Sintaxe do JavaScript: object.style.backgroundPosition="center"

Mais exemplos

Como usar % para localizar a imagem de fundo
Este exemplo demonstra como usar porcentagem para localizar a imagem de fundo na página.
Como usar pixels para localizar a imagem de fundo
Este exemplo demonstra como usar pixels para localizar a imagem de fundo na página.

Suporte do navegador

A tabela indica a primeira versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5