0

I'm trying to get a page to display different background image based on Holiday.

When I used the DevTools in IE and pasted the following in #s4-workspace in css, nothing happened. But it worked when I pasted it under .ms-backgroundImage

background-image: url("bgimage.jpeg");

Below code works in Chrome and Edge but not in IE11.

if (dtTodayHol >= holSD && dtTodayHol <= holED) {
    document.getElementsByClassName('ms-backgroundImage')[0].style.backgroundImage = "url('" + holBG + "')";
}

Also tried it on #s4-workspace, same result:

    document.getElementById('s4-workspace').style.backgroundImage = "url('" + holBG + "')";

and also tried below but didn't work in Chrome, Edge, or IE:

.style.background = "#ffffff url('" + holBG + "') no-repeat cover"

All browsers are giving the same dates:

  • dtTodayHol = Tue May 21 2019 00:00:00 GMT-0700 (Pacific Daylight Time)
  • holSD = Mon May 20 2019 00:00:00 GMT-0700 (Pacific Daylight Time)
  • holED = Mon May 27 2019 00:00:00 GMT-0700 (Pacific Daylight Time)
1

We can use the code below to set SharePoint background image of the pages. You need modify the holBG in code to your image url.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    var holBG="/sites/lz/PublishingImages/p1.jpg";
    var dtTodayHol=new Date();
    var holSD=new Date("5/20/2019");
    var holED=new Date("5/27/2019");
    if (dtTodayHol >= holSD && dtTodayHol <= holED) {
        $(".ms-backgroundImage").css("background-image", "url('"+holBG+"')");
    }
});
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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