Backgrounds: Color, Image, and Gradients

7 min read

Background Properties

CSS backgrounds can be a solid color, an image, a gradient, or any combination layered on top of each other. The background shorthand or individual properties like background-color and background-image control these.

css

.hero {
  /* Solid color */
  background-color: #f0f4ff;

  /* Image with size and position */
  background-image: url("/images/pattern.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Linear gradient */
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Radial gradient */
  background-image: radial-gradient(circle at top left, #4f46e5, #7c3aed 60%);

  /* Multiple backgrounds — first listed is on top */
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("/images/hero.jpg");
}

When placing text over a background image, always add a semi-transparent color overlay (as shown above) to guarantee sufficient contrast for accessibility.

Ready to test yourself?

Practice CSS— quiz & coding exercises