A single image, when used on the background it has opacity applied to be only partially visible.

var duckbar1 = $("#divDuck1").progressBar({
imageUrl: 'images/duck.png',
imageHeight: 290,
imageWidth: 254
});

// to update percentage value to 15%
duckbar1.SetPercentage(15);
			

Same as above, but dark background.

var duckbar2 = $("#divDuck2").progressBar({
imageUrl: 'images/duck.png',
imageHeight: 290,
imageWidth: 254
});
			

Having no background image (or making it totally transparent)

var duckbar3 = $("#divDuck3").progressBar({
imageUrl: 'images/duck.png',
imageHeight: 290,
imageWidth: 254,
backgroundOpacity: 0
});
			

Two different images; a 'full' and an 'empty', the background (or empty) image having no transparency

var bucketbar = $("#divBucket").progressBar({
imageUrl: 'images/BucketFull.png',
backgroundImageUrl: 'images/BucketEmpty.png',
imageHeight: 146,
imageWidth: 176,
backgroundOpacity: 1
});
			

NZ loves pies. I also love pies.

var piesBar = $("#divPie").progressBar({
imageUrl: 'images/nz-pies.png',
backgroundImageUrl: 'images/nz-empty.png',
imageHeight: 342,
imageWidth: 233,
backgroundOpacity: 1
});