ImagesLesson 78Free preview

Hero Image

This lesson is part of How To · All levels

Summary

A hero image is a large banner at the top of a page that contains the main message, a brief description, and an action button. The background image is usually combined with an overlay to keep the text prominent. The size of the hero and his typography are responsive to keep proportional across devices.

Key points

Hero images serve to capture attention and convey the main message.
Background-size: cover and background-position: center maintains the image view.
The dark overlay enhances the contrast of text and buttons.
The min-height 60-80vh gives enough space without covering the entire page.
It makes the hero title size adjust the screen width.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.