How to change the background color and/or image of a page in a course player?


How can I change the background colour of, or add a background image to a page in the course player?



You will need to define a style in your cascading style sheet (CSS).

To add a background colour use the code below. Replace the colour (#4BE28D) with your own.

#player #content-item {

    background-color: #4BE28D;


To add an image, use the code below.

#player #content-item  {

       background-image: url (url of your background image);

       background-position: center;

       background-size: cover;


The image will cover the entire background



For steps to add a page to your course, visit the our Helpsite and read Add a Page to a Learning Module and Add a Panel to a Page.

1. Select the Script

2. Enter the code

3. Select Save


You can view your changes by selecting the Preview button on top of the page.

Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.