Skip to main content
Are you okay? Emergency/Crisis UOIT Home

Banner images

Banner images are images that appear above the main content area of the page and the breadcrumbs page path.

For example:

Banner Preview Screenshot


Banner images are optimized for mobile devices – different size images are loaded depending on the device being used to decrease page load time and bandwidth use. Banner images should be requested and created by Communications and Marketing because of specific size, resolution, and layout restraints. Submit a Project Initiation Form to request banner images. 

For your reference, banner image sizes are as follows: 

Small screens (phones) 488px W x 140px H
Medium screens (tablets) 1024px W x 320px H
Large screens (computers) 1920px W x 600px H

How to add a banner image:

  1. Upload your images to the Shared Assets website in the CMS.
  2. On your website, edit the page or create a new page on which you want the banner image.
  3. Expand the Banner Image section.
    Expand Banner Image section screenshot

  4. For each size option, browse to and select the appropriate image. The first, default option should be the medium image. 
    Select each banner size screenshot