Problem description

Given a <section class="fullscreen-section"><img class="bg-img" src="hero.jpg"><div class="overlay"></div></section>, write CSS so the image always fills the background (cover and center), the overlay content is perfectly centered and readable, and the image is visually dimmed.

Goal

Implement a classic hero section with a full-bleed background image and a dimmed overlay.

Constraints

• No JavaScript is allowed.

• Do not modify HTML.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.