Creating Full Screen Image Backgrounds in Articulate Storyline

For my solution "Arise the Noodle Hero" as part of "The Show" for the The Learning Conference, I received a lot of questions and comments about my use of full screen background images.


Here's a step by step of how to achieve this in your own Articulate Storyline 360 project.


Plus, be sure to subscribe and stay tuned for part two and three of this series. In these upcoming videos I'll show you how to create a transparent player to immerse your learners into the experience, and how you can use full screen video backgrounds.



Need the JavaScript code? Find it below. Don't forget, you'll need an image URL to place into the code to retrieve your image, and pop it into the tags (as indicated by the yellow italic font below.


document.body.style.backgroundImage = "url('your image URL here')";
document.body.style.backgroundSize = "cover";
document.body.style.backgroundRepeat = "no-repeat";
0 views

Subscribe today and enjoy latest news fresh in your inbox.

Learning Experience Designer

Troy Ashman

  • LinkedIn Icon
  • Facebook Icon
  • Twitter Icon

Contact

+61 0434 043 405
troyashman@gmail.com

Wentworth Point, NSW
Australia 2127

ABN:  1234 567 8910

© 2020  Troy Ashman

Let's keep in touch