Hero Image

Review: Masthead is Done

Your newspaper has a bold masthead with your name, date, and issue number. Below it is the hero image - the large, dominant photo that anchors the front page.

In this stage you'll add the image and a wrapper div. In Stage 3 you'll learn how to lay text on top of that image using position: absolute. For now - the image itself.

Introducing position: relative

CSS positioning lets you control exactly where an element sits on the page. There are four types - in this unit you'll use two:

• position: relative - the element stays exactly where it normally would on the page (its spot in the flow doesn't change), but it becomes a positioning context - a container that absolutely-positioned children can anchor themselves inside. Without this, a child with position: absolute would escape and anchor to the whole page instead.
• position: absolute (coming in Stage 3!) - the element lifts completely out of the normal page flow. Other content flows around it as if it doesn't exist. It then positions itself using top, bottom, left, and right coordinates - measured from its nearest parent that has position: relative set.

Add the Main Article HTML

Inside your <main> element, add a .main-article section. Inside that, add an .image-wrapper div containing your hero image.

Style the Main Article and Wrapper

Add CSS for .main-article and .image-wrapper. The key property is position: relative on the wrapper - this prepares it to hold the overlay text in Stage 3.

• max-width: 1000px - sets a ceiling on how wide the article can get. On a large monitor, an element would naturally stretch across the full window. 1000px is a comfortable reading width - wide enough for a hero image, narrow enough that the eye doesn't have to travel too far across.
• margin: 20px auto - shorthand for 20px top/bottom margin and auto left/right. Setting horizontal margins to auto is the classic CSS centering technique: the browser calculates equal space on both sides, pushing the element to the center of its parent.
• position: relative on the image-wrapper - this one doesn't visually change anything yet. But it's critical groundwork: it turns the wrapper into a positioning container so the overlay text in Stage 3 can be anchored precisely inside it.
• width: 100% on the image-wrapper - makes the wrapper fill the full width of the .main-article element, so the hero image has maximum room.

Style the Hero Image

Now style the .main-image so it fills the full width of its container at a fixed height, with object-fit: cover to keep it looking great.

• width: 100% - makes the image fill the full width of its wrapper. Without this, the image would display at its natural pixel size, which could be too wide or too narrow.
• height: 350px - locks the image to a fixed 350px height regardless of the image's actual dimensions. This is what gives the hero image that cinematic, banner-like shape. Most images aren't naturally that wide-and-short ratio, which is why the next property is necessary.
• object-fit: cover - when the image is forced into a shape that differs from its natural dimensions, this property controls how it fills the space. cover means the image is scaled up until it fills the entire frame, cropping the edges if needed. The image always looks full and intentional - never squashed or stretched.
• display: block - images are technically inline elements by default, which means browsers add a small invisible gap below them (the space reserved for descending letters like g and y). Setting block removes that gap so the image sits cleanly against any border or element below it.

Make It Your Own!

• Try changing height: 350px to 450px for a more dramatic hero
• Try a different placeholder image seed that matches your article topic
• Update the photo credit with a real name or source
• Try removing border: 2px solid #ccc - cleaner look, no border