jQueryUI CSS included images

I am using jQuery UI and jQuery. I made a modification to the jQuery UI file so all the images are base64 incoded in the CSS File. This is because of a special requirement that all the images and开发者_如何学C files should be on only one file.

For example:

.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff 
       url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAeUlEQVRoge3OM
          QHAIBAAsV/nh8J
          DDfAkCjImpn5HvbfDpwIVoKVYCVYCVaClWAlWAlWgpVgJVgJVoKVYCVYCVaClWAlWAlWgpVgJVgJ
          VoKVYCVYCVaClWAlWAlWgpVgJVgJVoKVYCVYCVaClWAlWAlWgpVgJVgJVhtqiwTEKTLXTgAAAABJ
          RU5ErkJggg==
       ) 
       50% 50% repeat-x; color: #222222; 
       }

But when I use a dialog, the css isn't loaded correctly. For example, when I do:

    $("#dialog").dialog();

a dialog is displayed but the dialog title and bottom don't appear.

Not sure how you converted the background image to base64 but in this demo in which I encoded the .ui-widget-content and .ui-widget-header background image seems to work OK in Chrome 14. Note that the title and bottom have different background images (although I haven't done the bottom one for this demo).

Edit: Code duplicated here in case jsFiddle ever disappears:

HTML

<div id="dialog"></div>

JavaScript

$('#dialog').dialog();

Note: requires jQuery and jQueryUI

CSS

.ui-widget-content {
    border: 1px solid #aaaaaa; background: #ffffff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAIUlEQVQYlWP48ePHfyYGBgaGIUT8//8fO5cSFn6J4UQAAJSgIpAFCJPdAAAAAElFTkSuQmCC) 50% 50% repeat-x; color: #222222; 
}

.ui-widget-header {
    border: 1px solid #E78F08;
    background: #F6A828 url(data:image/png;base64,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) 50% 50% repeat-x;
    color: white;
    font-weight: bold;
}