CSS Colors and Backgrounds

Color is one of the first things CSS lets you control, but there's more to it than picking a hex code. CSS supports several color formats, each useful in different situations, and backgrounds go well beyond a flat color fill — images, gradients, and positioning all come into play.

CSS Color Formats

The three formats you'll see most often are hex, rgb(), and hsl(). They describe the exact same colors, just in different ways.

.hex    { color: #1e90ff; }
.rgb    { color: rgb(30, 144, 255); }
.rgb-a  { color: rgb(30 144 255 / 60%); }   /* with transparency */
.hsl    { color: hsl(210, 100%, 56%); }

All four rules produce the same shade of blue (the last one at 60% opacity). Hex is compact and common in design tools; rgb() is intuitive if you're thinking in red/green/blue channels and makes adding transparency straightforward; hsl() (hue, saturation, lightness) is often the easiest to reason about — if you want a darker version of a color, you just lower the lightness percentage without having to recalculate hex digits.

Background Color vs Background Image

background-color fills an element with a flat color. background-image layers an image (or a gradient) on top, and by default repeats it in both directions to fill the element.

.banner {
  background-color: #0f172a;             /* shows while the image loads, or if it fails */
  background-image: url("/hero.jpg");
  background-size: cover;                 /* fills the box, cropping if needed */
  background-position: center;            /* keeps the image centered while cropping */
  background-repeat: no-repeat;
}

This produces a banner that's fully covered by the hero image, scaled and cropped so it always fills the box without distorting, centered so the most important part of the image stays visible regardless of the box's aspect ratio. The dark background-color underneath acts as a safe fallback before the image loads.

Linear Gradients

A gradient is itself a type of background-image — no actual image file needed.

.card {
  background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}

This fills the card with a smooth diagonal gradient flowing from indigo at the top-left to pink at the bottom-right. The angle (135deg) controls the direction, and you can add as many color stops as you like, each with its own position along the gradient.

Putting It Together

A common real-world pattern combines a gradient over an image for a readable overlay on hero sections:

.hero {
  background-image:
    linear-gradient(rgb(0 0 0 / 55%), rgb(0 0 0 / 55%)),
    url("/hero.jpg");
  background-size: cover;
  background-position: center;
}

Layering a semi-transparent black gradient on top of the photo darkens it just enough that white text placed over it stays readable, while the photo itself remains clearly visible underneath — a technique used constantly on landing-page hero sections. Once you're comfortable with backgrounds, pairing them with solid typography choices is usually the next step toward a polished page.

---