Summary - Hero section

Combine color and background properties to build a hero section.

What does a hero section do?

A hero section sits at the top of a page; it is the big heading and image a visitor sees first. It usually runs full width, with a dark background image and a white heading on top.

We will combine the color and background properties you learned to build a hero from scratch: the background shorthand for the image, color for the text, background-size to cover and padding for breathing room.

A plan for the hero

To build the hero, you will combine four pieces: a .hero class selector, the background shorthand for the image, color for the heading and padding for content space.

In the first task you set the surface and text color. In the second task you add color and a soft shadow to the .hero h1 selector to make the heading pop. Mind the contrast between the colors.

Exercise Build the .hero section

Add a .hero class selector. Set its background shorthand to #1a1a2e url("/images/hero.jpg") center/cover no-repeat, its color property to #fff, and its padding property to 4rem 2rem.

Show example solution

/* build the .hero section */
.hero {
  background: #1a1a2e url("/images/hero.jpg") center/cover no-repeat;
  color: #fff;
  padding: 4rem 2rem;
}

Exercise Make the .hero h1 heading pop

Below the existing .hero block, add a .hero h1 selector. Set its color property to #fff and its text-shadow property to 0 2px 4px rgba(0, 0, 0, 0.4).

Show example solution

.hero h1 {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

Test yourself

Match each property to its purpose

background

Image and color on one line
color

Sets the text color
background-size: cover

Image fills the box
opacity

Fades the whole element

Complete the hero text color

.hero {
  background: #1a1a2e url("/images/hero.jpg") center/cover no-repeat;
  color: ____;
  padding: 4rem 2rem;
}

Show answer

.hero {
  background: #1a1a2e url("/images/hero.jpg") center/cover no-repeat;
  color: #fff;
  padding: 4rem 2rem;
}

Next lesson: Border basics

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies