This background will be the first thing you and your signed-in learners and teachers will see when they return to your site and open to their Home page. 

Make it brand-consistent and motivational. 

You will probably want to avoid wording or an image that is too busy. Make sure the color is dark enough to provide contrast, or users will have difficulty reading the overlaid text. 

You can use the blur option or a color overlay for a more abstract background or to improve contrast. 

Your brand color will appear mostly in high-impact areas, like action buttons. Because of this, choose a mid-tone color. Colors that are too dark or too light keep links and buttons from looking clickable and white makes some buttons seem to disappear (oh no!).

Some core interface styles won’t be affected to ensure they remain optimized for consistency, readability, or usability.

Banner image width and height is flexible—no matter the size or shape the image will be resized to fit "automagically." But in terms of resolution, 1400x400 pixels or larger is a safe size. 

Don’t include any text or meant-to-be-read details on the image. You’ll get a separate place to enter text as you set up your banner/s.

Making sure that images you use aren’t too high-contrast and don’t contain too much detail will help text set on top of them read more easily. For example, here’s a safe image, and here’s a risky one.

If you want to get nerdy about it, try picking or editing images to have primarily midtones.

If you add multiple banners, they will automatically scroll across the top of your school. 

Don’t include any text or meant-to-be-read details in the image. (Occasionally, one to two words of text may be okay, but be sure they are in the center and large enough at all sizes).

Course covers with a variety of colors and contrast work best.

Course covers appear at a variety of sizes depending on context. It’ll help to select images or artwork that work well both large and small.

The recommended dimensions are: 600 pixels wide by 450 pixels tall.

Max file size is 4MB.

You’ll upload your images as .PNG, .JPG, or .GIF, but do not include any transparent backgrounds. .JPG images are recommended for most images.

Banner image width and height is flexible—no matter the size or shape the image will be resized to fit "automagically." But in terms of resolution, 1400 x 400 pixels or larger is a safe size. 

Don’t include any text or meant-to-be-read details on the image. 

Making sure that images you use aren’t too high-contrast and don’t contain too much detail will help the text set on top of them read more easily. For example, here’s a safe image, and here’s a risky one.

If you want to get nerdy about it, try picking or editing images to have primarily midtones.

You’ll upload your images as .PNG, .JPG, or .GIF, but do not include any transparent backgrounds. .JPG images are recommended for most images.

The course banner can be blurred to produce an atmospheric background behind the course path. 

You can also edit the banner by adding an overlay in order to improve contrast or coloring. 

Use a .PNG file format with a transparent background.

Use white or a very light color for your logo to ensure enough contrast.

Logos used here will be contained within a 300x50 pixels box that shrinks down to 150x50 as the screen gets smaller.

Keep in mind the box (above) is just a container. If your logo is super long it will be constrained by width and it won’t fill up the height. If it is short it will be constrained by height and won’t fill up the width. So make sure you crop your logo with this in mind.

Make sure your file is twice the resolution above—so ~500x100 pixels.

Use a .PNG or .JPEG file format.

Your image should be a square ratio and at least 100x100 pixels. 

You can also use an image with a transparent background, and your app icon will fill in the background when used on a mobile device home screen.