My player template has a gray background color. I know I can modify this by changing the color scheme, but I'm wondering if there is a way to use a patterned background instead, or a picture?? I'm guessing not, because I couldn't find the option in the template or color scheme editor. But maybe there's a way to do it by modifying the published output somehow? Any one tried that? Here's a screenshot of one of the courses in the community showcase, with the area I'm talking about. Thanks in advance for any ideas!!
Hi Bob. You're right, there isn't currently an option to change the html background to an image. However, Brian Houle, another guy here in the community, shared a tip about this awhile back. You can do some file editing after you publish, to add the background that you want.
First, before you publish, make sure that in Player Templates>Other you've chosen "Resize browser to fill screen" and "Lock presentation at optimal size." Then go ahead and publish. In your published output, open player.html in a text editor, and change the body tag to include a background attribute pointing to the filename of the image you want to use. For example, if your file name was background.jpg, your code could be
Thank you so much for the awesome suggestion! I was struggling with how to add flash or some other background with a little more pizazz than simply flat color.
A co-worker is creating a .gif animated background image for me to use as my html background. Is there a particular size he needs to be aware of or can I resize it after the fact?
Hi there Pam - if you use a small background image, it'll "tile" itself behind your presentation's player. So, if you want to avoid the tiling, you'd need to find out what size display the majority of your learners will be using, and tailor the image size to match.
Hi Carla, no, it should be ok to use WordPad as long as you don't add formatting and you resave it as an html file. I just tested that with a sample test file and it worked fine.
Make sure you have done all of the following:
Place your jpg in the same location as your edited player.html file
In Player Templates > Other, choose "Resize browser to fill screen" for the Browser Size, and "Lock presentation at optimal size" for the Presentation Size, as noted above.
When you publish, make sure you are publishing with the proper player template (not the default Corporate Communications template)
This does work perfectly! However, I'd like to keep allowing my window to "scale presentation to fill browser window" instead of "Lock presentation at optimal size". 'Scale presentation to fill browser window' doesn't work with this method--is there another way?
Hi - We are trying to do this and verified that we have the code entered correctly in our html file (no spaces etc), we have out texture jpg in the same folder as our player. html file, and we made sure our publish settings in the player template were set to Resize browser to fill screen" and "Lock presentation at optimal size."
When we run the player.html file after doing all of this we do see a difference; however, the pattern that we want to fill the entire grey area is only showing up on a small portion of the margins as shown (left and right margins only). Any thoughts or suggestions.
As per Phil's statement above, this method works best when "Lock presentation at optimal size" is chosen instead of "Resize browser to fill screen". It's a bummer--I like to 'Resize' too!
Hi Brenda - Thanks so much for the quick response. Another question for you... from what I see, "Lock your presentation at optimal size" and " resize browser to fill screen" are 2 seperate options and I can't choose one or the other (something needs to be selected from both drop downs.) So, if I keep "lock your presentation at optimal size" for the second dropdown, which option do I choose for the first dropdown?
Resizing the browser causes the problem, because you dont know what size the window is going to be the image will fit or not depending on their resolution.
Using optimal size means you can lock it and know which size image to use which is why Brenda's works and yours doesnt, you could tile the image in the background, but this is something I have never done
Is there a short tutorial for changing the html background in Storyline? I have tried to follow the instructions in this thread but must be missing something. It's not working.
Here's a quick tutorial for including an image background in Storyline. Just add this line of html anywhere before the closing head tags... I prefer at the bottom:
I have succesfully loaded my image to the background of the screen, however, now my published elearning is not appearing! What have I done incorrectly?
26 Replies
Hi Bob. You're right, there isn't currently an option to change the html background to an image. However, Brian Houle, another guy here in the community, shared a tip about this awhile back. You can do some file editing after you publish, to add the background that you want.
First, before you publish, make sure that in Player Templates>Other you've chosen "Resize browser to fill screen" and "Lock presentation at optimal size." Then go ahead and publish. In your published output, open player.html in a text editor, and change the body tag to include a background attribute pointing to the filename of the image you want to use. For example, if your file name was background.jpg, your code could be
marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" background="background.jpg">
Then you'd need to place your background.jpg in the same folder as player.html.
Keep in mind that you'd need to make this same change each time you republish, since everything in your folder gets overwritten when you publish.
Oh cool. I was able to edit the player.html and it worked!
Jeanette and Bob,
Thank you so much for the awesome suggestion! I was struggling with how to add flash or some other background with a little more pizazz than simply flat color.
A co-worker is creating a .gif animated background image for me to use as my html background. Is there a particular size he needs to be aware of or can I resize it after the fact?
Thanks!
Hi there Pam - if you use a small background image, it'll "tile" itself behind your presentation's player. So, if you want to avoid the tiling, you'd need to find out what size display the majority of your learners will be using, and tailor the image size to match.
Thank you, Jeanette! I'll give that a try and let you know the results!
Hello,
Ive been trying to insert a photo into the background of my elearning and have so far been unsuccesful. This is what I have been writing in so far:
Hi Carla. It looks like you have an extra space between the filename of your image file and the quote mark that precedes it.
I removed it and still not working. I am using WordPad, would this be a problem?
Hi Carla, no, it should be ok to use WordPad as long as you don't add formatting and you resave it as an html file. I just tested that with a sample test file and it worked fine.
Make sure you have done all of the following:
This does work perfectly! However, I'd like to keep allowing my window to "scale presentation to fill browser window" instead of "Lock presentation at optimal size". 'Scale presentation to fill browser window' doesn't work with this method--is there another way?
It works best when you don't enable scale, you could use a texture that you set to repeat
Hi - We are trying to do this and verified that we have the code entered correctly in our html file (no spaces etc), we have out texture jpg in the same folder as our player. html file, and we made sure our publish settings in the player template were set to Resize browser to fill screen" and "Lock presentation at optimal size."
When we run the player.html file after doing all of this we do see a difference; however, the pattern that we want to fill the entire grey area is only showing up on a small portion of the margins as shown (left and right margins only)
. Any thoughts or suggestions.
Hi Erika--
As per Phil's statement above, this method works best when "Lock presentation at optimal size" is chosen instead of "Resize browser to fill screen". It's a bummer--I like to 'Resize' too!
Hi Brenda - Thanks so much for the quick response. Another question for you... from what I see, "Lock your presentation at optimal size" and " resize browser to fill screen" are 2 seperate options and I can't choose one or the other (something needs to be selected from both drop downs.) So, if I keep "lock your presentation at optimal size" for the second dropdown, which option do I choose for the first dropdown?
Erika-
You're welcome! I LOVE this community!
When I used this technique, I used 'Resize browser to optimal size', just because it seemed like a good fit.
Perhaps Jeanette or Phil have a for-sure answer?
Resizing the browser causes the problem, because you dont know what size the window is going to be the image will fit or not depending on their resolution.
Using optimal size means you can lock it and know which size image to use which is why Brenda's works and yours doesnt, you could tile the image in the background, but this is something I have never done
Hi Jeanette,
Is there a short tutorial for changing the html background in Storyline? I have tried to follow the instructions in this thread but must be missing something. It's not working.
Hi Karen,
Here's a quick tutorial for including an image background in Storyline. Just add this line of html anywhere before the closing head tags... I prefer at the bottom:
body background="plaid-bg.png"
Screenr tutorial: view
David,
Thank you for the quick response and the simple tutorial. It worked!
On the road again...
Hello,
I have succesfully loaded my image to the background of the screen, however, now my published elearning is not appearing! What have I done incorrectly?
Hi Carla,
Can you post a screen print of your report.html file?
This discussion is closed. You can start a new discussion or contact Articulate Support.