image de fond pour les boutons de dialogue jquery ui

Question

est-il possible de donner un bouton une image d'arrière-plan vraiment que j'ai une image que je veux utiliser un bouton et serait bien s'ils sont restés en place comme les boutons par défaut. en ce moment, je viens de les dans la boîte de dialogue, mais le reste du contenu est dynamique et je ne veux pas qu'ils disparaissent lorsque la barre de défilement apparaît

Edit: ok donc je compris comment faire un background image mais je ne peux pas voir l'image entière

$("#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 
      } 
     } 
    }); 

il pourrait y avoir plus de boutons à venir

Answer 1

Pourquoi ne pas cibler seulement le bouton en utilisant le CSS?

Ajoutez simplement vos boutons personnalisés ainsi:

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

Answer 2

Si vous voulez voir l'image entière en arrière-plan, vous devez régler la « largeur » et styles 'height' pour que l'élément atteigne la taille de l'image du bouton. Je mets habituellement la « largeur » à la taille de l'image du bouton, ajouter un peu de « padding-top » pour pousser le texte un peu, « hauteur » devrait être la hauteur de l'image moins le padding-top, puis texte -align: centre.