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