Page background image not working
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
This is because jQuery is no longer included in the Storyline output.
You can add it back in as per the instructions here or here.
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.