Problem: Responsive Background Cover

15 min

Try to create a hero section with a background image that always covers its container area, preserving aspect ratio and centering the image, regardless of viewport or container size.

Problem description

You have a <div class="hero"> element meant to display a full-width background image. Write CSS rules so the image covers the entire container area without distortion, preserving its aspect ratio and centering its focus point.

Goal

Implement CSS in styles.css to apply background-size: cover and background-position: center, ensuring the image scales responsively and fills its container.

Constraints

Do not modify the HTML structure.
Use only CSS (no JavaScript is allowed).
Background image must cover the entire container.
Image must remain centered and preserve its aspect ratio.

Sample visual output

Here’s what the output would look like: