Add background image to display in mobile browser

I'm not sure if the options discussed here still apply to Storyline 360 and responsive player, but it may be worth a try.

Hi Michael, thanks for the update. I have already followed that thread when adding the background image and it worked perfectly when viewing the output on a PC/ laptop. The problem is when viewing from a mobile. The slide appears with a black background and the background image is not visible even though the slides are 100% transparent.

Further, I could not find the following code on story.html file to update it;

var g_strWMode = "window";

I am using SL3.

Hi Sanduni,

I tried to change the background by using the code Melissa Milloway and had the same problem on mobile. 

Then I found this video shared by David Anderson; https://youtu.be/QYK7A5pz1ms  But I couldn't make it work. Maybe it helps you. 

Hi Ridvan,

Thanks for sharing the video by David Anderson. I will try it and update here, if it works on the mobile.

Unfortunately, no luck with that also :(.

Thank you Alexandros for your guidance on this.  It's my bad I didnt' check in the official document!

To anyone who is searching for the same, the following JS code which is already mentioned in JS best practices, works perfectly on mobile as well.

parent.document.body.style.backgroundImage = "url('image.jpg')";
parent.document.body.style.backgroundSize = "cover";
parent.document.body.style.backgroundRepeat = "no-repeat";

Place a copy of the image.jpg file in the root folder of your published output.

Credit: Alexandros Anoyatis