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

• Defaults
• Recommended Image Size
• Appearance on the LMS
• Tips for selecting images
• Examples
• Considerations

By Default

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

Recommended Image Size

Background Image

1920px x 360px and 300 KB file size.

Foreground Image

768px x 360px and 300 KB file size.

Welcome Tile Images - Appearance on the LMS

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

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

Foreground: Right-aligned

Foreground: Center-aligned

Examples

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

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

The background and foreground images look like 1 image.

The foreground and background image blend well together. 

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

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

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.

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.

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.

The Text Overlay

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

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.