How to change the background-position property?

1

I would like to know a javascript that changed the background-position of a given div.

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

    
asked by anonymous 13.02.2016 / 17:35

1 answer

2

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 position of the background from one point to another, Javascript is not necessary. You can create your own rule that changes 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

    
13.02.2016 / 17:50