Как установить CSS URL-адрес абсолютного местоположения?

Я работаю над мобильным приложением HTML5, и изначально у меня есть фон элемента DIV, установленный с помощью CSS следующим образом:

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

В моем приложении У меня есть метод, который изменяет фоновый DIV на основе выбора, сделанного в раскрывающемся списке из предыдущего метода с использованием jQuery:

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

Все это отлично работает, когда я нахожусь в корне своей страницы. Однако у меня есть некоторые ссылки в приложении, использующие хэш-теги для навигации по странице (например, #MyHonor). Когда я перехожу к одному из этих тегов и вызываю свою функцию сброса выше, изображение прерывается. Когда я вызываю Chrome Inspector, чтобы посмотреть на тег DIV, он говорит, что изображение, которое он пытается загрузить, - это «images / MyHonor / ClanSpider.png», которого не существует.

Я знаю, что URL-адрес CSS сгенерирует ссылки на его расположение в приложении, но не имеет значения, куда я перемещаю файлы CSS в приложении.

Есть ли у меня способ переписать то, что получается в результате обработки URL, или альтернативный способ указания фонового изображения DIV без выполнения какой-либо обработки на стороне сервера? В идеале это приложение будет работать с функцией кеширования манифестов HTML5, поэтому у меня не будет доступа к каким-либо серверным языкам.