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
});