Propriedade de posição de fundo de estilo
Exemplo
Altere a posição de uma imagem de fundo:
document.body.style.backgroundPosition = "top right";
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A propriedade backgroundPosition define ou retorna a posição de uma imagem de fundo dentro de um elemento.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
| Property | |||||
|---|---|---|---|---|---|
| backgroundPosition | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Sintaxe
Retorne a propriedade backgroundPosition:
object.style.backgroundPosition
Defina a propriedade backgroundPosition:
object.style.backgroundPosition = value
Valores de propriedade
| Value | Description |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
If you only specify one keyword, the other value will be "center". |
| x% y% | The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. |
| xpos ypos | The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and units |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Detalhes técnicos
| Valor padrão: | 0% 0% |
|---|---|
| Valor de retorno: | Uma String, representando a posição de uma imagem de fundo |
| Versão CSS | CSS1 |
Mais exemplos
Exemplo
Altere a posição da imagem de fundo em um elemento <div> para a parte inferior central:
document.getElementById("myDiv").style.backgroundPosition = "center bottom";
Exemplo
Altere a posição da imagem de fundo em um elemento <div> para 200px horizontal e 40px vertical:
document.getElementById("myDiv").style.backgroundPosition = "200px 40px";
Exemplo
Retorne a posição da imagem de fundo em um elemento <div>:
document.getElementById("myDiv").style.backgroundPosition;
Páginas relacionadas
Tutorial de CSS: Fundo de CSS
Referência CSS: propriedade de imagem de fundo
Referência CSS: propriedade background-position
Referência HTML DOM: propriedade background