How do I set a CSS url to an absolute location?

Question

I'm working on an HTML5 mobile app and I initially have the background of a DIV item set through the CSS as follows:

background-image: url('images/ClanSpider.png');

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:

function ResetMyHonor()
{       
   ClanImage = 'images/Clan' + MyClanName + '.png';
   $("#MyClanName").html(MyClanName); 
   $("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')');
}

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.

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.

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.

Answer 1

Try putting a leading slash on those paths to represent the root.

ie use:

url('/images/ClanSpider.png')

instead of

url('images/ClanSpider.png')

Answer 2

From reading through your comments on the other answers I think you're creating a problem for yourself that doesn't really exist. If url('/images/ClanSpider.png') is going to work when you upload to the web server then the trick is to make it work the same way when working locally. By far the easiest way to do this, especially if your focus is an offline app which has little in the way of server side requirements (which I'm assuming is true, as you mentioned file:/// URIs), is to run a local web server.

Python ships with a module SimpleHTTPServer, if you have Python installed then starting it is as simple as going to your L5RHonor project directory in a command prompt and issuing the following command:

python -m SimpleHTTPServer

Then instead of accessing your files with URIs like this:

file:///H:/Projects/L5RHonor/images/ClanSpider.png

You will access them like this:

http://localhost:8000/images/ClanSpider.png

All your root relative file paths will now work correctly, as an added bonus the offline caching will work correctly in Chrome and you'll be able to see from the log in the command prompt window that it is requesting and caching the correct files according to your manifest.