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");
x.style.backgroundImage = "url('Cover.jpg')";
x.style.backgroundSize = "cover";
x.style.backgroundRepeat = "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
Thank you so much for your quick reply and pointing for the discussions, Matt.
There is still an issue in the above javascript which is already discussed in the discussion. Currently working on them.
Thanks again for pointing out these discussions.
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
document.body.style.backgroundImage = "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.
Thank you for your time and effort in finding this alternative solution, Owen.
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");
x.style.backgroundSize = "cover";
x.style.backgroundRepeat = "no-repeat";
x.style.backgroundPosition = "center";
x.style.backgroundImage = "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.
Where do you place this code? story.html?