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.
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.
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>
animation