Add an image to an up Counter

See more:

Javascript

CSS

jQuery

I have a simple script for a counter which starts from a number 'a' and loops till a number 'b'.. The counter is working absolutely fine, all I need is to add a simple image to each digit of the counter.

This is the script:

(function ($) {
    $.fn.countTo = function (options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function () {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof (options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof (options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
})(jQuery);

I've customized it with my css (css below):

.countup {
    text-align: right;
}

.total, .today {
    color: #0A1927;
    font-size: 52px;
    font-weight: 200;
    letter-spacing: 24px;
    padding-left: 2px;
}

.dsh {
    background: transparent url('../img/dash.png') repeat-x;
    border-image-slice: 30;
    background-size: 50px 60px;
    margin-left: 5px;
    margin-right: 5px;
}

below is a section of my aspx page:

<pre lang="xml"><header>
    <div class="container">
        <script type="text/javascript">
            jQuery(function ($) {
                $('.total').countTo({
                    from: 0,
                    to: "<%= totcount %>",
                    speed: 1000,
                    refreshInterval: 50,
                    onComplete: function (value) {
                        console.debug(this);
                    }
                });
            });
            jQuery(function ($) {
                $('.today').countTo({
                    from: 0,
                    to: "<%= todaycount %>",
        speed: 1000,
        refreshInterval: 50,
        onComplete: function (value) {
            console.debug(this);
        }
    });
});
        </script>

        <div>
            <h2 class="countup">total <span class="dsh total"></span></h2>

            <h2 class="countup">today <span class="dsh today"></span></h2>
        </div>
    </div>
</header>

But it does not give the desired result!! I know I am trying to achieve this in the poorest way possible! I have no idea how to include bg in jquery itself.. Any help would be appreciated...


output link : http://www33.zippyshare.com/v/55761207/file.html[^]

p.s. totcount and todaycount are values from codebehind!! You can replace it with a number if you test it!! Thanks