How to change background-position property?

Question

I would like to know a javascript that changes the background-position of a particular div.

I’m trying to get the position of the background.

Answer 1

Use backgroundPosition:

document.querySelector('div').style.backgroundPosition = '50% 50%';

div {
  background: url(http://i.stack.imgur.com/c9dbY.jpg) no-repeat;
  height: 200px;
  width: 200px
}

<div></div>

To change the background position from one point to the other, you do not need Javascript. You can create your own rule that changes the position with @keyframes and apply to a property animation:

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

div {
  animation: minha-animacao 4s linear forwards;
  background: url(http://i.stack.imgur.com/c9dbY.jpg) no-repeat;
  height: 300px;
  width: 300px
}

<div></div>

---

Property support animation