Background Color

The original version of this lesson was generously donated by Elizabeth Dennis who used this as part of a presentation at InstructureCon 2014. Simply put, this lesson will show you how to create a background color for part or all of your page without relying on the text background color option alone (who needs all those white spaces between lines, right?)! The text here is an example of this, and you've probably noticed (slightly more complicated) passages of text with background colors earlier in the course!

The Code Snippet

<div style="background:#FF9900;">This is where your content goes!</div>

Anatomy of the Code Snippet

A description of the code snippet's parts.

Steps to Create a Background Color on a Canvas Page

Select and copy the code snippet.
Navigate to a new or existing Canvas page and go to Edit mode.
Switch to the HTML Editor.
Paste the snippet! (For existing pages, paste the snippet where you want the background to start.)
- For new pages: Add your content to the content section of the snippet.
- For existing pages: Move the closing tag </div> to where you want the background to end.
Modify the color of the background as needed!

Modify the Code

Change the hex code (#FF9900 in the snippet!) to change the color of the background!

The original lesson for this snippet included color (text color) and height properties. For the sake of this lesson, I've simplified this code to create a background for only the content within the division tags. Check out the example for an option that includes height.

Danielle's Note!

Troubleshooting

This code snippet is as simple as they come, but especially for a first timer, it's still very possible to make a mistake. If your background isn't showing up where you expect it to be, check that your content is in-between the opening tag, <div style="background:#FF9900;">, and the closing tag, </div>!

Examples

If you add the height property to the code snippet, you can create a background that extends beyond the boundary of your content! The code snippet for this background (without the video) is:

<div style="background: #33ADD6; height: 650px;">CONTENT HERE</div>