What is it about?
A large image stage on a website, often referred to as a "Hero image" or "Hero image", offers several advantages that can help improve the user experience and communicate information. It should be ensured that when using a background image, it is of high enough quality to captivate users.
Single-column stages
For the big visual appearance
Single-column stage with a background image
This stage is suitable as a start image for pages. The height of the stage is set to fullscreen (viewport size).
Single-column stage with a background image
The height of the stage can be defined by the spacing in the frame stage.
For the mobile view, the spacing has been removed.
Single-column stage with a background image
For better readability, the option “Use different text colour depending on colour schemes for text on background images” has been activated
Single-column stage with background colour
and an active frame around the stage
Single-column stage with fixed background image
and a banner overlapping the next stage
Single-column stage with content in semi-transparent box
Alignment left and a banner
Single-column stage with content in semi-transparent box
Alignment right and a banner
Single-column stage
with content in a semi-transparent, centrally aligned box
- Content maintained in article container
- Heading and text alignment centred
- Banner in the bottom right corner of the stage
Single-column stage with background video
Content is displayed half-width
Single-column stage with animated banner