Page background image not working

Feb 21, 2020

As per client requests, many of the courses that I developed had page background images. The below javascript worked pretty well for the purpose (thanks to Russell Killips).

$(".top-ui-bg").css("background-color", "transparent");
$(".area-primary").css("background-color", "transparent");
$(".cs-slide-container").css("background-color", "transparent")
$(".bottom-ui-bg").css("background-color", "transparent");

var x = document.getElementById("presentation"); = "url('Cover.jpg')"; = "cover"; = "no-repeat";


However, with the recent updates, there is no way to include a background image to Storyline 360. The above javascript does not work any longer and when I made the slide to 100% transparent in dark theme, the slide shows in white colour.

Story file and published output are attached herewith.

Appreciate any help to solve this...



5 Replies

My solution, rewrite the code.

I used the following in the other example you sent me through LinkedIn:

//Code to change the html background to an image = "url('cover.jpg')";

var tempID = document.querySelector("[id^='uniqueDom']");
tempID.setAttribute("fill-opacity", "0")
var tempID = document.querySelector("[id^='slide-bg']");
tempID.setAttribute("fill-opacity", "0");

To avoid most of this custom code, you can just use (or switch to) the classic player and in the player properties window set the player background components to 100% Transparency. 
Then the only code you need is to set the background image to the page.



Sanduni Fernando

As the javascript in the description no longer works, the below is the updated code:

document.getElementById("slide").style.backgroundColor = "transparent";
var x = document.getElementById("wrapper"); = "cover"; = "no-repeat"; = "center"; = "url(Cover.jpg)";

Thank you so much Russell Killips for sharing this updated code.


Owen, Russell,

You guys are real Heroes and sharing knowledge is the beauty of this e-learning community.