ImagesLesson 77Free preview
Form on Image
This lesson is part of How To · All levels
Summary
Form on image places the form above the background image, usually in the middle of the screen. The form panel is given a bright background to keep the input clear, while the image at the back is given an overlay. The grid or flexbox layout facilitates the centering of the form vertically and horizontally.
Key points
- The background image can be combined with an overlay using linear-gradients and url().
- Place-items: center on the grid centering the form in two directions.
- Width: min(380px, 100%) makes the form responsive.
- Box-sizing: border-box prevents input from spreading through the container.
- Labels with attributes for should be connected to the input id.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.