Challenge - Color and background

Build a hero section with color and background properties.

Recall color and background

On a hero section color and background work together. color sets text color, background-color a flat background. background-image places an image; the background shorthand combines color, image, position and repeat on one line.

When text sits on an image, a semi-transparent rgba() layer keeps it readable. Since opacity affects the whole element, rgba() is better when only the background should fade.

Exercise Build the hero section

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

Show example solution

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

Test yourself

Which is a valid background shorthand?
```
.hero {
  /* ? */
}
```
- background-color-image: #1a1a2e url("/hero.jpg")
- background: url "/hero.jpg" no-repeat
- background-image: no-repeat center
- background: #1a1a2e url("/hero.jpg") center/cover no-repeat
Show answer

background: #1a1a2e url("/hero.jpg") center/cover no-repeat — Correct. The background shorthand joins color, image, position/size and repeat on one line.

Complete the dark background color for the hero

.hero {
  background-color: ____;
  color: #fff;
  padding: 4rem 2rem;
}

Show answer

.hero {
  background-color: #1a1a2e;
  color: #fff;
  padding: 4rem 2rem;
}

Match each color format to its description

#1a1a2e

Six-digit hex value
rgb(26, 26, 46)

Three light channels as numbers
hsl(240, 28%, 14%)

Hue, saturation, lightness
rgba(0, 0, 0, 0.5)

Semi-transparent with alpha

Next lesson: Challenge - Layout basics

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies