1

Gostaria de saber um javascript que mudava a background-position de uma determinada div.

Estou tentando buscar a posiçao do background.

2
  • Posso colocar o valor do tipo 30, 20? dentro de aspas?
    – Gonçalo
    Commented 13/02/2016 às 16:45
  • Acredito que não, as propriedades são do tipo: top, left, center, bottom...acredito que valores não sao permitidos. Commented 13/02/2016 às 16:47

1 Resposta 1

2

Use backgroundPosition:

document.querySelector('div').style.backgroundPosition = '50% 50%';
div {
  background: url(https://i.sstatic.net/c9dbY.jpg) no-repeat;
  height: 200px;
  width: 200px
}
<div></div>

Para mudar a posição do background de um ponto ao outro, não é necessário Javascript. Pode criar sua própria regra que altera a posição com @keyframes e aplicar à uma propriedade animation:

@keyframes minha-animacao {
  from { background-position: 0 0 }
  to   { background-position: 100% 50% }
}

div {
  animation: minha-animacao 4s linear forwards;
  background: url(https://i.sstatic.net/c9dbY.jpg) no-repeat;
  height: 300px;
  width: 300px
}
<div></div>


Suporte da propriedade animation

4
  • Já agora, se quiser mudar o background.position em tempo real como faço? ou seja está 50px, e mudar até 80 px em tempo real, como se fosse 51px, 52 px, 53 px, 54 px... até chegar aos 80? E que todas esses mudanças se notem no site.
    – Gonçalo
    Commented 13/02/2016 às 16:54
  • Faz um loop com Javascript ou então use as animações das CSS. Commented 13/02/2016 às 16:55
  • Pode-me dar um exemplo por favor, sou um pouco novato
    – Gonçalo
    Commented 13/02/2016 às 16:58
  • @Gonçalo Feito, com CSS. Depois, edite sua pergunta e explique que você está buscando alterar a posição do background entre dois pontos. Comentários são descartáveis. Commented 13/02/2016 às 17:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .