how to place large irregular sized image into a jQuery UI button

how to place large irregular sized image into a jQuery UI button

Given a button of a fixed size and an image of an unknown size (but smaller dimensions than the button), how do I dynamically place that graphic onto the button?

This example only handles something icon sized, as does this example.

My own attempts end up cropping the image in the lower right. Hoping to get something robust that works across anything themeroller can spit out. Here's a link to a live example:

http://jsbin.com/iliqih/2/edit


  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"
  4. />
  5. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  6. <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  7. <script>

  9. $(document).ready( function() {
  10. var butt = $("<div class='butt' style='width:500; height:500px' />");
  11. $('body').append(butt);
  12. butt.button();

  14. var cssKey = ".ui-icon.bigIcon";
  15. $(".butt").button("option", {
  16.     icons: {
  17.         primary: 'bigIcon'
  18.     },
  19.     text: false
  20. });

  22. var imgUrl = "http://www.artisancomplete.com/wp-content/uploads/2011/03/testpattern-hd-1080-480x270.png";
  23. var imgW = 480;
  24. var imgH = 270;
  25. var str = "<style type='text/css'> " + cssKey + " { background-image: url(" + imgUrl + ") !important; width:" + imgW + "px; height:" + imgH + "px; margin-left:-" + (imgW/2) + "; margin-top:-" + (imgH/2) + "} </style>";
  26. $(str).appendTo("head");
  27. });
  28. </script>
  29. </head>
  30. </html>