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);