title: Hard coded URLs in CSS file
body: <p>The project I'm working on has hard coded URLs in the CSS file like this:</p>
  
  <pre><code>a.edit
  {
      background: url(/TestSite/Images/Edit.png) no-repeat top left;
      display: inline-block;
      width: 16px;
      height: 16px;
      padding:1px;
      margin:1px;
      text-indent: -9999px; /* hides the link text */
  }
  </code></pre>
  
  <p>When the site is moved to production, these links break.  I'm looking for a solution so it just works where ever the site is run.</p>
  
  <p>This is what I came up with and it works but I'm wondering if there is a better way:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          $("a.edit").css('background', 'url(' + $("body").data("baseurl") + 'Images/Edit.png) no-repeat top left');
      });
  &lt;/script&gt;
  &lt;body data-baseurl="~/"&gt;...&lt;/body&gt;
  </code></pre>