tutoriais mais recente desenvolvimento web
 

Style backgroundPosition Property

<Estilo de objeto

Exemplo

Alterar a posição de um background-image:

document.body.style.backgroundPosition = "top right";
Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.


Definição e Uso

Os conjuntos de propriedades backgroundPosition ou retorna a posição de uma imagem de fundo dentro de um elemento.


Suporte navegador

Os números na tabela especificar a primeira versão do navegador que suporta totalmente a propriedade.

Propriedade
backgroundPosition 1.0 4.0 1.0 1.0 3,5

Sintaxe

Devolver o imóvel backgroundPosition:

object .style.backgroundPosition

Defina a propriedade backgroundPosition:

object .style.backgroundPosition= value

Valores de propriedade

Valor Descrição
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
Se você especificar apenas uma palavra-chave, o outro valor será "center" .
x% y% O valor de x indica a posição horizontal e o valor y indica a posição vertical. O canto superior esquerdo é 0% 0%. O canto inferior direito é de 100% a 100%. Se você especificar apenas um valor, o outro valor será de 50%.
xpos ypos O valor de x indica a posição horizontal e o valor y indica a posição vertical. O canto superior esquerdo é 0 0. As unidades podem ser pixels (0px 0px) ou quaisquer outras unidades CSS. Se você especificar apenas um valor, o outro valor será de 50%. Você pode misturar% e unidades
initial Define essa propriedade para seu valor padrão. Leia sobre inicial
inherit Herda esta propriedade a partir de seu elemento pai. Leia sobre herdar

Detalhes técnicos

Valor padrão: 0% 0%
Valor de retorno: A String, que representa a posição de um background-image
CSS Versão CSS1

mais Exemplos

Exemplo

Alterar a posição da imagem de fundo em um <div> elemento para baixo centro:

document.getElementById("myDiv").style.backgroundPosition = "center bottom";
Tente você mesmo "

Exemplo

Alterar a posição da imagem de fundo em um <div> elemento para 200px horizontal e vertical, 40px:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";
Tente você mesmo "

Exemplo

Retornar a posição da imagem de fundo em um <div> elemento:

document.getElementById("myDiv").style.backgroundPosition;
Tente você mesmo "

Páginas relacionadas

CSS tutorial: Background CSS

Referência CSS: background-image property

Referência CSS: background-position property

Referência HTML DOM: background property


<Estilo de objeto