Can I edit the story.html file to add a background image?

Feb 21, 2013

Hi,

I know that this is an old question, but I am fairly new to Storyline and could do with some help. I need to add some image branding to the html page for a customer. I've tried adding the

<body background="my image"> in the header html, and I've tried an external css file, but so far, nothing has worked.

Any help would be very much appreciated.

Many thanks

Dave

65 Replies

Ashley Terwilliger-Pollard
Staff

8 years ago03/03/16 at 2:01 pm (UTC)

Hi Jessica,

You can change the background design as detailed here, but there isn't a specific way to change it only for the HTML5 output. Hopefully someone in the community may have additional ideas to share with you, but please note that it'll likely be a modification of the published output and that is not something that we can offer support for.

8 years ago03/07/16 at 9:22 am (UTC)

Hi Guilherme,

I have attached the working background for you.

ciclo01_2016_-_Storyline_output.zip

8 years ago03/07/16 at 9:28 am (UTC)

Yes, you need to edit the "story_html5.html" and edit this line: <style>html,body{background:#FFFFFF;}</style>

to:

Replacing "BG.png" to the filename of your image.

Hope this makes sense.

Guilherme Araujo

8 years ago03/09/16 at 5:32 pm (UTC)

Phil, thanks for the help!

Amy L.

almost 8 years ago06/23/16 at 7:08 pm (UTC)

Hello,

I am using the code in the screenr, but it's still not working. I actually see the image when the course is loading, but it is the size of the actual course/player--it's not surrounding course. Does there need to be different code for Storyline 2?

Ashley Terwilliger-Pollard
Staff

almost 8 years ago06/23/16 at 7:12 pm (UTC)

Hi Amy,

This thread is a bit older, so I'm not certain that folks are still subscribed but since it's a modification of the published output it's not something that I can assist with. You may want to look at messaging a few of those individuals directly to see if they are able to assist.

almost 8 years ago06/23/16 at 7:22 pm (UTC)

There are options you may want to use to automatically resize your presentation to fill the screen.

Joseph Conrad

almost 8 years ago06/23/16 at 7:23 pm (UTC)

Here is my text I use for this:

<style>html,body{background: url('MYFILEURL') no-repeat; background-size: cover; overflow: hidden;}</style>

Amy L.

almost 8 years ago06/23/16 at 9:16 pm (UTC)

Is this an added line or a changed one? I added it here, but now the course doesn't launch at all.

document.bgColor = g_strBgColor;

Joseph Conrad

almost 8 years ago06/23/16 at 9:19 pm (UTC)

Yeah, I wouldn't add that document.bgColor statement.

But definitely experiment. Put code in and see if it helps. Also remember that your background_blue.png statement can be relative, but you may want to make it absolute for testing purposes by starting with http: