Unit 6 · Stage 5

Positioning and Overlays

Your page already shows a hero image. In this stage you will stack two layers on top of it, a semi-transparent overlay and a title, using CSS positioning. Play in the editor, or press 👀 Type it with me to be guided. (pause on a highlighted word to see what it does)

📦 Quick recap. You already have a .hero div showing a background image. Any property you have met lives in the 📖 Glossary at the top. This stage adds two new ideas: CSS positioning and the rgba() color format.

1 How positioning stacks layers

In normal HTML flow, elements stack vertically: each block sits below the one before it. CSS positioning breaks out of that flow, so you can place elements at exact spots inside a container and layer them on top of each other.

Stacking layers takes two pieces that work together:

What this code means

position: relative on the parent: Tells the browser this element is a positioning context. Any absolutely positioned children measure their spots from this element's edges, not from the whole page.
position: absolute on the child: Pulls the element out of normal flow and places it at the spot you set with top, right, bottom, and left.

📐 What you will build. The hero currently shows a background image. You will add two layers on top of it: a semi-transparent dark overlay that dims the image a little, and a text layer with a title and subtitle over the image. This is the hero pattern used on almost every professional website.

2 rgba(): color with transparency

Before adding the overlay, meet the color format it uses: rgba(). You already know hex colors like #1a3020. The rgba() function is another way to write a color, but it adds a fourth value, alpha, which controls transparency.

What this code means

rgba(red, green, blue, alpha): The first three values are 0 to 255 for each color channel. The alpha value is 0 to 1, where 0 is fully transparent and 1 is fully solid.
rgba(0, 0, 0, 0.45): Black at 45% opacity. On top of a photo it becomes a see-through dark film that makes white text readable without hiding the image behind it.

3 Update the hero CSS

Add position: relative to your existing .hero rule, then add four new rules: one for the overlay, one for the text layer, and one each for the heading and paragraph inside it.

What this code means

position: relative on .hero: Makes the hero the positioning context, so the overlay and text measure their spots from its edges.
top: 0; left: 0; right: 0; bottom: 0 on .hero-overlay: Stretches the overlay to fill the hero from edge to edge, a full-coverage layer sitting right on top of the image.
background-color: rgba(0, 0, 0, 0.45): The 45% dark film that dims the image just enough for white text to read clearly.
bottom: 60px on .hero-text: Places the title 60 pixels up from the bottom of the hero, a caption-like spot that suits a page about place and land.

✍️ Add position: relative to .hero, then add the .hero-overlay, .hero-text, .hero-text h2, and .hero-text p rules inside <style>. Use the example below, then press ▶ Run.

/* add position: relative to your existing .hero rule */
.hero { background-image: url(https://placehold.co/1400x600/1a3020/f2ede5?text=Relationships+to+the+Land); background-size: cover; background-position: center; background-repeat: no-repeat; height: 500px; position: relative; }

/* then add these four new rules */
.hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.45); }
.hero-text { position: absolute; bottom: 60px; left: 0; right: 0; text-align: center; color: white; padding: 0 20px; }
.hero-text h2 { font-size: 2.5rem; margin: 0 0 12px; }
.hero-text p { font-size: 1.125rem; opacity: 0.9; margin: 0; }

🤔 Quick check before you go on

What position value did you add to .hero so the overlay and text measure from its edges? Type it, then press Submit to unlock the last step.

4 Update the hero HTML

Right now the hero is an empty container: <div class="hero"></div>. Give it two children, the overlay and the text, so the layers you styled have something to show.

What this code means

<div class="hero-overlay">: The dimming layer. It has no text inside, its only job is to darken the image so the title reads clearly.
<div class="hero-text">: Holds the <h2> title and the <p> subtitle that sit over the image.

✍️ Replace <div class="hero"></div> with a hero that has an overlay div and a text div inside. Use the example below, then press ▶ Run.

<div class="hero">
  <div class="hero-overlay"></div>
  <div class="hero-text">
    <h2>Relationships to the Land</h2>
    <p>Traditional knowledge of place, carried across generations</p>
  </div>
</div>

5 Why it works, and make it your own

Why these positioning styles

position: relative on .hero: Without it, the absolutely positioned children would measure from the nearest positioned ancestor, which might be the whole page. relative here means the children measure from the hero's edges.
top: 0; left: 0; right: 0; bottom: 0 on the overlay: The standard way to make a full-coverage layer. All four sides pinned to the parent's edges stretch the element to fill it.
rgba(0, 0, 0, 0.45): Too low, like 0.2, and the text fights the image colors. Too high, like 0.7, and the image nearly disappears. 0.45 is a good starting point for most photos.
left: 0; right: 0; text-align: center on the text: An absolutely positioned box with no width defaults to zero width. Pinning left and right to 0 makes it span the full hero, and text-align: center centers the words inside.

Experiment, then set it back the way you like it.

Change the overlay to rgba(0, 0, 0, 0.2), then rgba(0, 0, 0, 0.7), and press Run to feel the difference.
Move the text by changing bottom: 60px to top: 40px.
Try your own title and subtitle in the .hero-text div.

✓ Finish this stage

To complete Stage 5, your hero needs position: relative, a .hero-overlay with a semi-transparent rgba() background, and a .hero-text layer with a title over the image. Press Check my work when you are ready. This opens Stage 6 and lets your teacher see that you finished.

YOUR CODE

PREVIEW