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