0Pricing
CSS Academy · Lesson

Background Color and Image

Apply background colors and images using background-color and background-image properties.

background-color

The background-color property sets a solid color behind an element. It accepts any CSS color value and is visible through transparent areas of background images.

body {
  background-color: #f5f5f5;
}

.hero {
  background-color: hsl(210, 60%, 20%);
}

background-image

background-image sets one or more images as the element background. Images are layered above background-color.

.banner {
  background-image: url("hero.jpg");
  background-color: #333; /* fallback */
}

All lessons in this course

  1. Color Values: Named, Hex, RGB, HSL
  2. Background Color and Image
  3. Gradients: Linear and Radial
  4. Opacity and RGBA Transparency
← Back to CSS Academy