background image for jquery ui dialog buttons

Question

is it possible to give a button a background image really i have an image that I want to use for a button and would be nice if they stayed in place like the default buttons. right now I just have them inside the dialog but the rest of the content is dynamic and I don't want them to disappear when the scroll bar appears

Edit: ok so I figured out how to make it a background image but then i can't see the whole image

    $("#statusbox").dialog({
        autoOpen: false,
        bgiframe: true,
        modal: true,
        width: 'auto',
        height:'auto',
        position: 'top',
        title:"Check Order Status",
        open: function(event, ui) {
            $(this).css({'max-height': $(window).height()-$(this).height() - 50 , 'overflow-y': 'auto'}); 
            $('.ui-dialog-buttonpane').find('button:contains("Find")').css("background-image", "url(images/order_now.gif)"); ;

        },
        buttons: {
            Find: function() {
               //do find
            }
        }
    });

there could be more buttons to come

Answer 1

If you want to see the whole background image, you will need to adjust the 'width' and 'height' styles so that the element extends to the size of the button image. I usually set 'width' to the size of the button image, add a bit of 'padding-top' to push the text down a little, 'height' should be the height of the image minus the padding-top, and then text-align: center.

Answer 2

Why not just target the button using CSS?

Just add your custom buttons this way:

.ui-dialog .ui-button {
 color: #fff;
 background: #555555 url("button-normal.jpg") repeat-x;
}
.ui-dialog .ui-button.ui-state-hover {
 color: #fff;
 background: #0078a3 url("button-hovered.jpg") repeat-x;
}