Backgrounds in CSS

Color, images, gradients and the way a background is sized and placed.

.hero {
  background-color: #0b0c10;
  background-image:
    linear-gradient(180deg, rgb(0 0 0 / 60%), #0b0c10),
    url("/img/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.stripe {
  background: repeating-linear-gradient(
    45deg, #14161c 0 8px, #101218 8px 16px
  );
}

How it works

1. Several backgrounds layer front to back, comma separated.
2. background-size: cover fills the box and crops the overflow.
3. A gradient is an image, so it can layer over a color.

Keywords and builtins used here

• background
• deg
• hero
• px
• rgb
• stripe
• url

The run, in numbers

Lines

15

Characters to type

305

Tokens

68

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 54 seconds.

Type this snippet

Step 4 of 6 in Boxes, step 17 of 26 in Selectors & the box model.

← Previous Next →