title: How do I set a CSS url to an absolute location?
body: <p>I'm working on an HTML5 mobile app and I initially have the background of a DIV item set through the CSS as follows:</p>
  
  <pre><code>background-image: url('images/ClanSpider.png');
  </code></pre>
  
  <p>In my app, I have a method that changes the background DIV based on a selection made in a dropdown list from a previous method using jQuery:</p>
  
  <pre><code>function ResetMyHonor()
  {       
     ClanImage = 'images/Clan' + MyClanName + '.png';
     $("#MyClanName").html(MyClanName); 
     $("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')');
  }
  </code></pre>
  
  <p>All of this works fine when I'm on the root of my page. However, I have some links within the app using hash tags to navigate the page (such as #MyHonor). When I've navigated to one of these tags and call my reset function above, the image breaks. When I pull up the Chrome Inspector to look at the DIV tag, it says that the image it is trying to load is "images/MyHonor/ClanSpider.png" which doesn't exist.</p>
  
  <p>I know the CSS url will generate links in reference to its location within the application, but it doesn't matter where I move the CSS files in the application. </p>
  
  <p>Is there a way for me to rewrite what comes out of the url processing or an alternate way of specifying the background image of the DIV without doing any kind of server side processing? Ideally this app will run through the manifest cache feature of HTML5, so I won't have access to any server based languages.</p>