LMS Customization Guidelines - Welcome Tile Images

Follow

The Welcome Tile allows you to set 2 images:

  • Background Image Display: We can scale the image to fill the entire space 1920px x 360px, or to repeat in a tiled format if it's not preferred.
  • Foreground Image Display: Appears above the background image as an overlay.

In This Article

By Default

If you do not upload image thumbnails to your courses there will be a default graphic assigned.

default.png

 

Recommended Image Size

Background Image

1920px x 360px and 300 KB file size.

bg-recommendedSize.png

Foreground Image

768px x 360px and 300 KB file size.

fg-recommendedSize.png

Welcome Tile Images - Appearance on the LMS

Visualize the welcome tile images and see how the Background and Foreground image work together.

VisuaAppearance.pnghighlight.png

Tips for selecting images

Choose an image that is within the safe zone to avoid unwanted clipping. For the Welcome Banner, you can either just upload a background image or a combination of a background and foreground image. Take note of the black overlay at the bottom of your banner with an opacity of 35% and height of 100px with some welcome text.

When you upload a foreground image make sure that it blends well with the background image and that objects or actions are distinguishable in a 768px x 360px image size. Foreground images are better if they have transparent backgrounds. The background image has a padding of 10px all around, the foreground image will not touch the edge of the welcome banner. The foreground image is meant to be a floating image.

Foreground: Left-aligned

fg-left.png

Foreground: Right-aligned

fg-right.png

Foreground: Center-aligned

fg-center.png

Examples

example1.png

The foreground image (YUM! CHOMP!), uses good colour contrast to pop out the background.

 

example6.png

This is only a background image and is like the example above, uses good colour contrast to separate from the background 

 

example2.png

The background and foreground images look like 1 image.

 

example3.png

The foreground and background image blend well together. 

 

example4.png

A text box image with a subtle overlay is a great way to add more description to the welcome banner. 

 

example5.png

The foreground image is not transparent but has soft edges that blend with the background image. 

 

caution2.png

Abstract images are better choices for selecting a Welcome Background Image.

Considerations

Images with Text

Exceptions for abstract images if the purpose is to showcase a programming language, word documents, and handwriting. You can use a banner with text, just be cautious about the black banner below.

caution1.png

Aspect Ratio

Use images with an aspect ratio of 16:3 for the background image & an aspect ratio of 32:15 for the foreground image.

caution3.png

caution4.png

Sharp Image Edges

Use caution when selecting solid shaped images for a foreground. The background image has a padding of 20px and in some cases, the foreground image will not blend well with the background image if it has sharp edges. Try feathering the edges or use opacity for the foreground image.

caution5.png

The Text Overlay

Take note of the black overlay or foreground image, make sure it does not inappropriately cover objects in your image.

caution6.png

Copyright

Use images that you own, have purchased, credit authors properly, ask permission for image usage or use creative commons license images with caution. Protect your content from copyright infringement.

caution7.png

Published on
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.