Change background image dynamically in IE

Question

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)

Answer 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>