## Background Position

The component that animates the CSS property controling the background-position property of a target element.

### Overview

Animate the position of the background image, simple and effective.

The KUTE.js Background Position component enables animation for the CSS backgroundPosition property on most browsers.

It can handle an entire set of input values [x,y], '0% 50%' and even 'left center'. The component always updates the values of the position property via % suffix for simplicity reasons and even if px or any other unit is supported.

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.

### Example

Here a couple of possible tween objects:

    // 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();

Start

### Notes

- Unfortunatelly this property also has no access at the sub-pixel level, animations are as good as it gets, despite the fact that the `%` suffix is used.
- 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 HTML Attributes component for much more animation potential and supreme animation quality.
- This component is bundled with the demo/src/kute-extra.js file.