Call us on: +44 (0)1271 337 110

/Phil Eagles Adding a background image to your Articulate Storyline course

Storyline is a great authoring tool for creating good looking eLearning, but what if you want to go that step further and really tailor the course to look exactly as you would like?

One limitation I found in Storyline is the inability to use a background image outside of the course. (See white area of the image).

Adding a background to Articulate Storyline

Unfortunately, you are limited to only using flat colours.

Adding a background image to your Articulate Storyline course

There is, however, a solution which simply means adding a line of code to your published output. And this is how you can do it.

First, publish your course and browse in your published folder.

Adding a background image to your Articulate Storyline course

Within this folder you will need a copy of your background image. (Note BG.png in folder)

Next you need to edit the Story.html file.

Between the style tags and within the body selector you need to add background-image: url("BG.png"); (Note the filename of the image).

Adding a background image to your Articulate Storyline course

Now navigate to: var g_strWMode = "window"; // transparent | window (use "window" for optimal performance, transparent for webobject support).

And change the mode from window to transparent.

Adding a background image to your Articulate Storyline course

Save the file and preview your work.

Adding a background image to your Articulate Storyline course

Outputing to HTML5

If you are outputting to HTML5 you will also need to edit story_html5.html.

As before you need to background-image: url("BG.png"); between the style tags and within the body selector.

Adding a background image to your Articulate Storyline course

You do not need to change the var g_strWMode property on the HTML5 version.

Save the file and preview your work.

Outputting to HTML5 on an LMS

To ensure the background image displays correctly on an LMS with HTML5 output you will need to edit index_lms_html5.html.

In between the last meta and first link tags you need to add this line: <style>html,body{background-image: url("BG.png");}</style> - replacing BG.PNG with the filename of your image.

Once complete, save the file and ideally upload the course to an LMS to test. 

Phil Eagles

Phil Eagles, Senior eLearning Developer, Bray Leino Learning

In my series of blogs I’ll talk about the components of eLearning design and development.

Copyright © 2017 Bray Leino Learning


Tagged in:

Other posts you may be interested in

/Kerry Pascall Why video is vital for L&D

Thursday September 07, 2017

Video has already become incredibly popular as a way of learning both inside and out of the workplace and L&D need to capitalise on this behaviour change in their learning strategies.

Read More