title: combining css and js files + css images
body: <p>I'm playing with this combine.php <a href="http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html" rel="nofollow noreferrer">file</a> and it looks nice, but I'm wondering if there is a work around for my problem.</p>
  
  <p>I now have fewer script and link tags for my resources that look and work like they're supposed to</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://path/to/server/javascript/libjs/jqueryui/1.8/development-bundle/ui/minified/jquery.ui.core.min.js,libjs/jqueryui/1.8/development-bundle/ui/minified/jquery.ui.widget.min.js,libjs/jqueryui/1.8/development-bundle/ui/minified/jquery.ui.datepicker.min.js,libjs/plugins/cluetip/1.0.6/jquery.cluetip.js,libjs/plugins/cluetip/1.0.6/lib/jquery.hoverIntent.js,libjs/plugins/cluetip/1.0.6/lib/jquery.bgiframe.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://path/to/server/css/libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.core.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.theme.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.datepicker.css,libjs/plugins/cluetip/1.0.6/jquery.cluetip.css" &gt;
  </code></pre>
  
  <p>however, images that are included in a stylesheet with a relative path sometimes do not appear - it depends on the order in which the stylesheets are included ie:</p>
  
  <pre><code>background: url(images/ui-bg_flat_75_ffffff_40x100.png)
  </code></pre>
  
  <p>The specific culprit on hand that I'm working with has to deal w/ a <a href="http://jqueryui.com/demos/datepicker/" rel="nofollow noreferrer">jqueryui datepicker</a> script and a <a href="http://plugins.learningjquery.com/cluetip/" rel="nofollow noreferrer">cluetip</a> script.</p>
  
  <p>Images for the datepicker have request urls like this one</p>
  
  <pre><code>http://path/to/server/css/libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.core.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.theme.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.datepicker.css,libjs/plugins/cluetip/1.0.6/images/ui-bg_flat_75_ffffff_40x100.png
  </code></pre>
  
  <p>where the image thinks the path is from the last included script (libjs/plugins/cluetip/1.0.6/), whereas its actually from an earlier script (libjs/jqueryui/1.8/development-bundle/themes/base/)</p>
  
  <p>I do not want to change any of my external resources to absolute paths.  Is there a workaround for this problem? is there a better way of handling this situation?</p>