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.

Answer 3

The simplest solution is obviously adding a slash to the URL to make it absolute. That will work fine, but it makes it impossible to move the application into a sub-directory, or to move static resources to a different server. If that is a problem, there are various alternative ways.

If the number of possible background images is finite, you could define every one in a class of its own:

.bgSpider { background-image: url('images/ClanSpider.png'); }
.bgFalcon { background-image: url('images/ClanFalcon.png'); } 
...

and then do an .addClass() to set the correct image.

Other than that, as far as I know, there is no way to specify a path relative to the style sheet (rather than the current document) when setting a background image path in Javascript. You would have to work with absolute paths, or define a root path in JavaScript, and use that:

// in the script head
imageRoot  = "http://www.example.com/mysite/images";
// later....
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');

Answer 4

The location of the CSS file is irrelevant, you are modifying the .style property of an HTML element. This is the same as using the style attribute.

As this is CSS embedded in the document, all URIs are relative to the document.

You probably want to start the URL with a /, or if you really want the absolute location specified in your question: http://

Answer 5

Try adding a / at the start of the URL?