Backgrounds and borders

Backgrounds and borders are how you separate one part of the page from another without adding any HTML. A card gets a border, a hero gets a background, and the structure stays exactly the same.

Backgrounds

A background paints the element’s box. It doesn’t take up space or change the element’s size. It covers the content and padding areas, and by default it also extends under the border.

Here’s a hero with a color and a decorative image:

.hero {
  background-color: #eef4ff;
  background-image: url('/images/pattern.svg');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
}

Each property does one thing. background-image loads the file. background-repeat: no-repeat stops it from tiling, which is the default. background-position puts it in the top right corner. background-size decides how it scales.

For background-size you’ll mostly use two keywords. contain scales the image so the whole thing fits inside the box, leaving empty space if the proportions don’t match. cover fills the box completely, cropping whatever doesn’t fit. Use cover for photos, contain for logos and patterns that must stay whole.

Always set a color under an image

Notice the background-color on the hero. It’s not decoration. Images load slowly on bad connections, and sometimes they fail. Until the image arrives, the text sits on that color, so pick one that keeps it readable.

You can list several images in background-image, separated by commas. The first one is painted on top.

Decorative vs meaningful

A background image has no alt text. Screen readers skip it. That’s right for a pattern or a texture. It’s wrong for a product photo or a chart. If the image carries meaning, put it in the HTML with an img element and an alt attribute.

Borders

A border is a line around the box, and unlike a background it takes up space:

.card {
  border: 1px solid currentColor;
}

That’s the shorthand: width, style, color. currentColor reuses the element’s text color, so the border follows your theme automatically. Change the card’s color and the border changes with it.

Because a border has width, adding one moves things. A classic mistake is adding a 2px border on hover: the element grows by 4 pixels and everything around it jumps. Two fixes. Give the element a transparent border in its normal state so the space is already reserved. Or use outline instead, which draws outside the box and never affects layout. Outline is also the right tool for focus rings, for the same reason.

Try this on the course page. Add the background above to .hero, then in DevTools uncheck background-image. Check the text is still readable on the color alone. Then add the card border and resize the window. The border-box size in the Layout panel should include those 2 pixels.