CSS Background Image

Question

I currently have a <div> in the page layout that has this hero image set as the background, making a nice banner across each page. I would like this banner to be unique for each page without having to crack open Visual Studio. I was hoping to have picture library called "Hero" for each site/subsite that contains a "hero" image for each site. I was thinking that relative addressing work in this manner.

Site Topology Main Site
  |- Hero List (w/hero.jpg...a bird pic)
  |
  |- Sub Site A
  |      |- Hero List (w/hero.jpg...a dog pic)
  |
  |- Sub Site B
        |- Hero List (w/hero.jpg...a cat pic)

Code in page layout:

//the below background-image: url() is what I was hoping to use to point to each sites relatively located hero.jpg  
<div class="bg" style="background-image: url('Hero/hero.jpg'); position: relative;">
  <div>
    <span>
      <!-- Site title -->
      <!--SPM:<SharePoint:ProjectProperty Property="Title" runat="server"/>-->
    </span>
  </div>
</div>

It doesn't seem to want to work using relative urls when on subsites. I've tried:

 Hero/hero.jpg <-- gets main sites hero image (http://mydomain/MainSite/Hero/hero.jpg)
 /Hero/hero.jpg <-- gets too root level (http://mydomain/Hero/hero.jpg)..doesn't exist 
./Hero/hero.jpg <-- gets main sites hero image (http://mydomain/MainSite/Hero/hero.jpg)

Is there another way to accomplish this using some sp property? Maybe something like:

background-image: url("<!--SPM:<SharePoint:ProjectProperty Property="SiteURL" runat="server"/>-->/Hero/hero.jpg")

UPDATE: Solved with the answer from @Amal Hashim...slightly modified.

var currentUrl = window.location.href;
//currentUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/')+1);
var image = currentUrl + "/hero/hero.jpg";
var imageUrl = "url('" + image + "')";
$('.bg').css("background-image", imageUrl);

Answer 1

Using CSS

1. Option #1 use SPURL token

   <% $SPUrl:~site/hero/hero.jpg%>
   

2. Option #2 use relative url in CSS file

   .bg {
       background-image: url('hero/hero.jpg');
   }
   

Using JavaScript or JQuery

<script type="text/javascript" language="javascript">
    window.onload = function () {
        var currentUrl = window.location.href;
        currentUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/')+1);
        var image = currentUrl + "/hero/hero.jpg";

        //if jQuery the uncomment below
        //$('.bg').css({"background-image":image});

        //JavaScript
        var elems = document.getElementsByTagName('*'), i;
        for (i in elems) {
            if((' ' + elems[i].className + ' ').indexOf(' bg ')
                    > -1) {
                elems[i].style.backgroundImage = "url('" + image + "')";
            }
        }
    }
</script>