Banners

University Theme features several banner image options and sizes. Websites running University Theme can have a single, site-wide image banner or a randomly rotating set of site-wide image banners. Individual webpages can display customized banners tailored specifically to the content of the page. Banner image can optionally be displayed using the parallax effect. A translucent black overlay is added to all banner imagery to improve readability of text in the banner area. In cases where text is not used in the banner area, the overlay can be removed.

In University Theme, text should no longer be part of the image. The banner area includes optional "live" text that is placed over the image using CSS. This text is accessible to individuals with disabilities, and it is mobile friendly.

Banner Sizes (non-Parallax)

  • Small: 1300 x 150px
  • Standard: 1300 x 200px
  • Medium: 1300 x 300px
  • Large*: 1300 x 600px

Banner Sizes with Parallax

  • Standard: 1300 x 405px
  • Medium: 1300 x 550px
  • Large*: 1300 x 990px

Banner images should be cropped to the appropriate size and optimized to load quickly. The file size of an individual banner image should be between 75kb and 200kb.

* Large banners are available for use on your homepage and landing pages only.

theme prototype

Selecting Images for the Banner Area

Banners images in University Theme are designed to span the entire width of the browser window. This effect means some parts of an image may be hidden as the width of the browser window (or device size) changes. If you are using the parallax effect, parts of the image will be hidden until the user begins to scroll; if you choose to use parallax effect, select a banner image that will work with the nature of this display.