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

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
Steve Flowers

Dave and Bill - 

You might have luck using JavaScript within a JavaScript trigger to set that up:

document.body.style.background = 'url(http://www.designmyprofile.com/images/graphics/backgrounds/background0169.jpg) no-repeat center center'

I put in an example background from an absolute link. 

If you want to include an image and reference it within your package there are a few good ways to do that. You can also make your player transparent so the background shows through.

Robert Stewart

I wrote this VBA script to add background image and some fancy ccs3 rounded corners to my custom player.

Use at your own risk !

It modifies story.js but makes a backup copy called StoryOLD.js before doing so.

Place it under your Published Directory

http://torontographic.com/examples/storyline/background.zip

Output:: I use web based publishing. Do not know if ipad, etc. looks as good.

Dave Galvin

Steve Flowers said:

Dave and Bill - 

You might have luck using JavaScript within a JavaScript trigger to set that up:

document.body.style.background = 'url(http://www.designmyprofile.com/images/graphics/backgrounds/background0169.jpg) no-repeat center center'

I put in an example background from an absolute link. 

If you want to include an image and reference it within your package there are a few good ways to do that. You can also make your player transparent so the background shows through.


Hi Steve, 

Many thanks for this, it seems to have done the trick! 

I really appreciate it.

David

Steve Flowers

Hi, Bill - 

In the case of the piece I included earlier, you'd invoke that within a JavaScript trigger. You can attach the trigger to many types of events like a button or a timeline start. This is handy since you don't really need to edit any of your HTML files and the change stays with the storyline source, updated on each publish.
Adebare Showemmo

Bill, since I saw your post this morning, I have being looking for a work around for this but I have not figure this out. Using image is easier. Check this tutorial by elearning:Adding a background image or texture to your story.html page in Articulate Storyline

                       

Lesley Cashman-Peck

I've tried both options and neither are working for me. Ugh! In IE, the background image tiles (and I don't want it to), but then disappears once the player is visible. ??? The background image isn't visible at all in Chrome or Firefox. Has anyone else been successful with adding a background image that does not repeat?

Yoni H.

Steve Flowers said:

Dave and Bill - 

You might have luck using JavaScript within a JavaScript trigger to set that up:

document.body.style.background = 'url(http://www.designmyprofile.com/images/graphics/backgrounds/background0169.jpg) no-repeat center center'

I put in an example background from an absolute link. 

If you want to include an image and reference it within your package there are a few good ways to do that. You can also make your player transparent so the background shows through.


This is a great solution (at least for my needs)

i changed the javascript slightly to "document.body.style.backgroundColor="blue""

Joseph Conrad

It looks like Articulate missed an opportunity in version 2 to add this feature. I would say there are probably plenty of folks who want to be able to put images, video and other features seen in most websites today as backgrounds instead of the an HTML 4 plain solid color background.

I do recognize that there are easy ways to change the presentation background and I love how Storyline resizes to match the size of the browser which is great, but most screens are either 16:9 or still hanging onto 4:3 and a good number are now 8:5 (which is a shocking find after researching it this morning).

Having a background and "floating" my presentation, perhaps even having some control of the padding built into the player controls, would really be sweet. I can't report this as a problem, but I don't see anywhere to get votes on these kinds of improvements and just suggesting it never really seems to give good ideas traction.

Does anyone else want more than just a background image behind the player? Video? Padding? More control?

Joseph Conrad

And while we are at it, is there any way that when we "flag" a comment that we can also "flag" it as part of a feature request? That would really save people the trouble to make formal requests considering that there is a lot of redundancy and loss of time and energy that could but cut down if we could directly vote for, second or make the suggestion for a product improvement directly from the community interface here.

Emily Ruby

Hello Joseph,

Are you referring to the "flag" button under the posts? This would actually cause the post to be sent for review for Spam. There has been recent discussion about the feature requests and how they are shared/handled, but for now it is best to just submit as many requests as possible so the development team is aware that many people want it.

Joseph Conrad

Yes, Emily, that is what I am referring to. It would take minimal effort to convert that Flag button into something much more useful than a spam notifier for the admin. It could be used as a "Like" button of sorts where the comment suggests an improvement. Normally customers pay me for this kind of suggestion, but it's a freebie for you.