ImagesLesson 76Free preview

Full Page Image

This lesson is part of How To · All levels

Summary

Full page image makes an image a backdrop that meets the entire screen height. The image is set to a background-size: cover and a background-position: center to stay proportional. The dark layer and the centralized content make the opening message easy to read.

Key points

Background-size: the cover makes the image cover the entire area without distortion.
Min-height: 100vh ensures the part is as high as the viewport.
Background-position: the center keeps the important part of the image visible.
The dark overlay layer enhances the contrast of the text.
Background-attachment: fixed should be avoided on mobile devices because of inconsistent performance and support.

Full lesson

Code examples and quizzes

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