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


Tags: css,html5,background-image

Problem :

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.



Solution :

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.


    CSS Howto..

    How can I use CSS to add a blank column between paired column groupings?

    How to vertically align absolutely positioned images on top of one another?

    How to write css fallbacks for vh vw

    How to Write an Angular directive to update CSS class based on form validation

    PHPStorm: How do I setup LESS to output to CSS directory with file watcher?

    How to have complex shadow background on variable height content area via CSS?

    How to force CSS refresh when using ASP.NET Themes?

    how to position two transparent images to overlap opposite corners of a container div

    How to make liquid layout in css using em?

    CSS/Web design: how to create an oblique/sided button

    CSS: How to define a centered div with endless vertical borders and an initial height of 100%?

    Google Apps Script How to link to JS or CSS file on Google Drive

    How can I add specific css id to parent menu with php or javascript

    How to resize content area with CSS dynamically and no javascript

    How do I make an image act as a video overlay?

    How to change the CSS of entire page/website on click?

    CSS - How to display dropdown text in one row?

    How to set css for first div, if there's no second div

    How can I fix the indentation in a facebook like-box?

    How to let 3 div columns extend the height until hit the bottom of the page?

    How to add a custom CSS file in ExtJs 5?

    How do I scale the size of the elements in my HTML according to screen size?

    Firefox File Upload Box is bigger than Chrome/IE/Safari - How to fix? - use size(HTML) and width(CSS) parameters

    How to make responsive text that isn't too large or too small

    How to implement small text list search functionality using CSS attribute selectors

    how to implement “blog” page in HTML/CSS? [closed]

    How to rotate image in relation to mouse position?

    How to add border in my clip-path: polygon(); CSS style

    How can I use css properties with different classes?

    How granular are CSS rem units?