jQuery UI - Progress Bar With Images

jQuery UI - Progress Bar With Images

Hello,

I am trying to create a progress bar using jQuery UI. I have two images: a "container" and a "filler". I am using the following code:

  1.     <script>
            $(function() {
                $("#progressbar").progressbar({
                    value: 100
                });
            });
        </script>

        <style>

            .ui-progressbar {
                background: url(jquery-ui/bars/1/main_bar.png);
                border: none;
                background-repeat: no-repeat;
                width = 890px;
                height = 60px;
            }
            .ui-progressbar-value {
                background: url(jquery-ui/bars/1/fill_bar.png);
                background-repeat: no-repeat;
                width = 890px;
                height = 60px;
            }
        </style>

Unfortunately, here are my results:

How do I get the two images to overlap properly? I have been playing around with the CSS for about 2 hours now with no luck at all.