Image and heading

CSS course · Beginner · Lesson 51/82

Add color, background and typography for the image and heading.

Image and heading

In this lesson you'll style the cover image at the top of the card and the heading below it. You'll use the .card-hero class for the image and .card-title for the heading.

background-image adds a background picture to an element; it's written as url("..."). color sets the text color and font-family sets the typeface. Listing fallbacks with commas is a good habit: Georgia, serif.

Font family fallbacks

When you write font-family: Georgia, serif, the browser first looks for Georgia. If it's not on the user's system, it falls back to another serif font. This keeps the page looking similar on different devices.

Generic family names are: serif (with feet), sans-serif (without feet), monospace (equal width). It's a good habit to always end with a generic family name after a specific font. In this lesson we'll use Georgia, serif for .card-title.

Exercise Add the .card-hero and .card-title rules

Take the file from the previous lesson (header comment + .card rule). Below it, add these two rules:

A .card-hero class selector with background-image: url("cover.jpg"), background-size: cover, and height: 140px.
A .card-title class selector with color: #2a3d66 and font-family: Georgia, serif.

End each declaration with a semicolon.

Show example solution

/* Alex Design - Portfolio card */

.card {
  width: 320px;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 12px;
  background-color: #ffffff;
}

.card-hero {
  background-image: url("cover.jpg");
  background-size: cover;
  height: 140px;
}

.card-title {
  color: #2a3d66;
  font-family: Georgia, serif;
}

Test yourself

Which CSS property adds a background image to an element?
```
.card-hero {
  /* ? */
}
```
- img-src
- background-image
- picture-source
- image-bg
Show answer

background-image — Correct. background-image adds a background picture; the value is written as url("...").

Complete the .card-hero background image declaration

.card-hero {
  background-image: ____;
}

Show answer

.card-hero {
  background-image: url("cover.jpg");
}

Match each property to its meaning

background-image

background picture
color

text color
font-family

typeface family
.card-hero

cover image

Image and heading