CSS Background Properties: Color, Image, Size, and Gradients

The background properties control colors, images, and gradients behind an element's content.

.hero {
  background-color: #1a1a2e;
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

background-color — a solid fallback color, shown before the image loads or if it fails to load.
background-image — accepts an image URL or a CSS gradient.
background-size: cover — scales the image to fully cover the element, cropping edges as needed, without distorting the aspect ratio. contain instead fits the whole image inside without cropping, potentially leaving empty space.
background-position — where the image is anchored (center, top right, or precise values like 50% 20%).
background-repeat: no-repeat — prevents the image from tiling, which is the default behavior for smaller images.

All five can be combined into one shorthand:

.hero {
  background: #1a1a2e url("hero.jpg") center / cover no-repeat;
}

Gradients don't need an image file at all:

.banner {
  background: linear-gradient(to right, #ff5733, #3357ff);
}

.circle {
  background: radial-gradient(circle, #ffcc00, #ff5733);
}

linear-gradient blends colors along a straight line (direction set by to right, 45deg, etc.), while radial-gradient blends outward from a center point — both render instantly with no image request, keeping pages fast.