Umbraco Backoffice Documentation

Image Banner

Full screen width image banner which acts as a cover image for the page. It can only be created in the root of the content (similarly as Section Layouts).

tombola promotional bingo banner

Content

Image Banner page component has one mandatory content parameter:

Responsive Picture

Picture element that has three content parameters:

  • Mobile Image - a single image which supports a variety of media formats and image transparency. 
  • Desktop Image (optional) - a single optional image that overwrites the Mobile Image on bigger screens (device width more or equal to 992px). It supports a variety of media formats and image transparency.
  • Content Description - a description of the uploaded image. It is very important to add a detailed image description for the website to be accessible for people who use screen readers.

Settings

Image Banner page component has the following settings:

Disable Lazy Loading

Toggling this setting will disable media lazy loading.

If the Image Banner is the first image on the page and is visible straight after the page loads, it should be set not to lazy load and this toggle should be active.

Images with lazy loading attribute will be downloaded after the page has been loaded and the image is visible on the user's screen. While images without the lazy loading attribute will be downloaded when the page is being initially loaded.

Ideally all the images should be lazy loaded since this improves the website speed and performance. However, all images that are shown on the page 'above the fold' - seen immediately without having to scroll, should be set not to lazy load.

Previous section:

YouTube Video Player

Next section:

UI Elements