Add background image to display in mobile browser

I have used the applied a background image to HTML5 published output with the below CSS;

 

body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 1050px 650px;
}

 

However, this is not working on mobile browser as it is the intended behavior of the responsive player. 

Does anyone know how to change the player code (on published output) to display the same image on mobile browser (as the slide background)?

6 Replies
Sanduni Fernando

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.

 

Sanduni Fernando

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