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; }