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;">
      <!-- Site title -->
      <!--SPM:<SharePoint:ProjectProperty Property="Title" runat="server"/>-->

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

1 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

        var elems = document.getElementsByTagName('*'), i;
        for (i in elems) {
            if((' ' + elems[i].className + ' ').indexOf(' bg ')
                    > -1) {
                elems[i].style.backgroundImage = "url('" + image + "')";
  • I was able to use jQuery I updated my question with the slight modified code you had. I feel silly, I should have thought of this...tunnel vision. Thank you Nov 7, 2014 at 20:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.