Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Fullscreen Section with Gradient Overlay

Solution: Fullscreen Section with Gradient Overlay

Let’s apply a background image with a dark gradient overlay to ensure text readability.

We'll cover the following...

Problem description

Given a <section class="fullscreen-section">, apply a background image and a semi-transparent black linear gradient overlay (from top to bottom). The text should be clearly readable in all cases. ...