Image background

Overview

The homepage banner allows you to promote a product or service at the top of the homepage with a full background image. This banner is used on top of each Business Unit homepage:

Residential homepage - Small entreprise homepage - Corporate homepage

Live demo (for Proximus employee):Residential homepage

---

Anatomy

Here is a quick overview of what a background image banner contains to better understand this documentation:

1. Background image
   Background image of the banner, it takes the full width of the page.
2. HTML content
   This HTML content is used to promote the product/service. It consists of the Design System components, which are usually: a heading, a subtitle, a promo patch with its info and a button.
3. Perso box
   The perso box is a white panel which is not part of the banner but which overlays the banner.

---

Gridding

When using a banner with a background image, the image covers the entire banner in full width. HTML content comes on top of the image such as the perso box. The banner is designed in such a way as to leave a free space for the important elements of the visual. When creating the image, this is where the key elements of the campaign such as main character, faces, devices, objects should be located.

In the classic 12-column gridding, the text content takes:

• Mobile: 7 columns for copy - 5 columns free space for the important elements of the visual
• Tablet: 6 columns for copy - 6 columns free space for the important elements of the visual
• Desktop: 5 columns for copy - 7 columns free space for the important elements of the visual

---

Minimum height

In the image background homepage banner, the height of the banner has a minimum size. If the HTML content takes up more than the minimum height, the height of the banner increases.

As the HTML content is limited, this makes it easier to create images because you don't have to worry about what the banner contains, your images should always be the same height (370 px for desktop, 380 px for tablet and 717 px for mobile).

---

Modes

In this component, HTML elements are added on top of the image. This content is in positive or negative mode and this affects the creation of the image. Image colors should be carefully considered, with legibility and accessibility as paramount concerns.

---

Best practices

Respect the margins and safe areas in the template and make sure that the main content isn’t placed behind the header, perso box or in the copy (e.g.: main character, faces, devices, objects).