How can I make a fixed background image not stay fixed on scroll?

Question

Yeah that title may have been confusing but here's why.

I have a donation counter that I want to use on a website underneath a sidebar navigation. The problem is, the way I created the donation counter was in codepen with fixed background images. Stupid me didn't consider that if someone scrolls the entire thing will go wack, I'm fairly new to coding so don't know of a better way. Here's my code and a JSfiddle, anyone have any ideas on how I can fix my problem, if there's no way any suggestions on how to create it without using a background image?

http://jsfiddle.net/LMqSB/ (I added text in so you can scroll)

<div class="container">
<div class="bw"></div>
<div class="show"></div>
<div id="bar" data-total="100">
    <div class="text">Currently at <br/><span>70</span><br><i>Click To Give</div>
</div>

css

.bw {
width:100%;
height:100%;
position:absolute;
bottom:0; background:url(http://fdfranklin.com/usf-bull-bw.png) fixed left top;
background-clip:content-box;
}
.show {
width:100%;
height:0%;
position:absolute;
bottom:0; background:url(http://fdfranklin.com/usf-bull.png) fixed left top;
background-clip:content-box;
}

jquery

percent = $('#bar div span').html();
total = $('#bar').attr('data-total');
percentStart = 0;

setInterval(function() {
$('.show').css('height',percentStart/total*100+'%');
$('#bar').css('height',percentStart/total*100+'%');
$('#bar div span').html('%'+percentStart);
if(percentStart<percent) {percentStart=percentStart+1;}
},35);

$("#bar div").addClass("load");

Answer 1

just set the background positions to left and bottom: http://jsfiddle.net/LMqSB/5/

and also removed 'fixed' from the background

background: url(http://fdfranklin.com/usf-bull-bw.png) left bottom

Answer 2

In the css for .container , change

position:relative

to

position:fixed

Then adjust the top and left values accordingly

http://jsfiddle.net/LMqSB/4/