Estilo atributo backgroundPosition

Definição e uso

backgroundPosition Definir ou retornar a posição da imagem de fundo no elemento.

Veja também:

Estilo HTML:Atributo background

Tutorial CSS:Fundo CSS

Tutorial CSS3:Background CSS3

Manual de Referência CSS:Atributo background-image

Manual de Referência CSS:Atributo background-position

Exemplo

Exemplo 1

Mude a posição da imagem de fundo:

document.body.style.backgroundPosition = "top right";

experimente você mesmo

Exemplo 2

Mude a posição da imagem de fundo do elemento <div> para o centro inferior:

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

experimente você mesmo

exemplo 3

mude a posição da imagem de fundo no elemento <div> para horizontal 200 pixels e vertical 40 pixels:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

experimente você mesmo

exemplo 4

retorne a posição da imagem de fundo no elemento <div>:

document.getElementById("myDiv").style.backgroundPosition;

experimente você mesmo

sintaxe

retorne a propriedade backgroundPosition:

objeto.style.backgroundPosition

defina a propriedade backgroundPosition:

objeto.style.backgroundPosition = value

valor da propriedade

valor descrição
  • superior esquerdo
  • superior central
  • superior direito
  • central esquerdo
  • central central
  • central direito
  • inferior esquerdo
  • inferior central
  • inferior direito
 Se você especificar apenas um nome de chave, o outro valor será "center".
x% y%

O valor x representa a posição horizontal, e o valor y representa 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 valor x representa a posição horizontal, e o valor y representa a posição vertical.

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

Se você especificar apenas um valor, o outro será 50%. Você pode misturar % e unidades.
initial defina essa propriedade para seu valor padrão. Veja também initial.
inherit herda essa propriedade do elemento pai. Veja também inherit.

detalhes técnicos

Valor padrão: 0% 0%
Valor de retorno: cadeia de caracteres, que representa a posição da imagem de fundo.
Versão do CSS: CSS1

suporte do navegador

backgroundPosition é uma característica do CSS1 (1996).

Todos os navegadores suportam completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
suporte suporte suporte suporte suporte suporte