<metaname="description"content="The Background Position component for KUTE.js allows you to animate the background-position property on most browsers.">
<aclass="facebook-link"target="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook">
<aclass="twitter-link"target="_blank"href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter">
<pclass="condensed text-right">Animate the position of the background image, simple and effective.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>Background Position</b> component enables animation for the CSS <b>backgroundPosition</b> property on most browsers.</p>
<p>It can handle an entire set of input values <b>[x,y]</b>, <b>'0% 50%'</b> and even <b>'left center'</b>. The component always updates the values of the position
property via <b>%</b> suffix for simplicity reasons and even if <b>px</b> or any other unit is supported.</p>
<p>While we might not have much use for this kind of animation, some older browsers will love to show you something if that is the case.</p>
</div>
</div>
</div>
</div>
<divclass="content-wrap">
<h3>Example</h3>
<p>Here a couple of possible tween objects:</p>
<pre><codeclass="language-javascript">// provide the exact values for interpolation
let bgPosTween = KUTE.to('selector1',{backgroundPosition:[0,50]}).start();
// provide the coordinates
let bgPosTween = KUTE.to('selector1',{backgroundPosition:"0% 50%"}).start();
// or provide the position names
let bgPosTween = KUTE.to('selector1',{backgroundPosition:"left center"}).start();
</code></pre>
<divid="bgPos"class="featurettes">
<divclass="example-item example-box"style="background: url('https://picsum.photos/400/300') center center no-repeat;"></div>
<divclass="example-buttons">
<aclass="btn btn-orange"href="#">Start</a>
</div>
</div>
<h3>Notes</h3>
<ul>
<li>Unfortunatelly this property also has no access at the sub-pixel level, animations are as good as it gets, despite the fact that the <code>%</code> suffix is used.</li>
<li>There are thankfully replacements for this forgotten property that strangelly supports CSS3 transitions, you can simply use all kinds of SVG masks and filters
and the <ahref="htmlAttributes.html">HTML Attributes</a> component for much more animation potential and supreme animation quality.</li>