Can I use a picture or texture for my html background?

Dec 27, 2010

Hi all,

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!!

26 Replies
Jeanette Brooks

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.

Pam Boyd

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?


Jeanette Brooks

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)
Erika LaRosa

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.

Erika LaRosa

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?

Phil Mayor

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

This discussion is closed. You can start a new discussion or contact Articulate Support.