Forum Discussion

SanduniFernando's avatar
SanduniFernando
Community Member
6 years ago

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...

 

 

General E-Learning

5 Replies

  • SanduniFernando's avatar
    SanduniFernando
    Community Member
    6 years ago

    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.

    • OwenHolt's avatar
      OwenHolt
      Super Hero
      6 years ago

      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.

       

       

      • SanduniFernando's avatar
        SanduniFernando
        Community Member
        6 years ago

        Thank you for your time and effort in finding this alternative solution, Owen.

  • SanduniFernando's avatar
    SanduniFernando
    Community Member
    6 years ago

    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.

    • USCMarty's avatar
      USCMarty
      Community Member
      5 years ago

      Where do you place this code? story.html?