Set background position according to contents of span with jQuery

I would like to change the position of a background image to match the numeric contents of a span element.

My html:

<div id="ecoBar">
    <div id="ecoSlider"></div>
    <h4>ECO <span id="ecoPercentage">50%</span></h4>
</div>

So I have a div#ecoSlider that represents a sliding scale that is 400px wide and a span#ecoPercentage that gives a numeric value. I would like to get that value from the span and apply to my background position.

My jQuery so开发者_如何学C far:

$(document).ready(function(){
    var value = $('#ecoPercentage').text();
    $('#ecoSlider').css('backgroundPosition', 'value 0');
});

I cannot seem to get this working, what am I doing wrong?

Many thanks in advance.

You are passing "value" as a string value. Try this instead:

$('#ecoSlider').css('backgroundPosition', value + ' 0');