Backgrounds and borders

A background paints an element without contributing intrinsic size. By default it extends underneath the border and covers the content and padding areas.

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

Use cover when an image should fill the box and cropping is acceptable. Use contain when the whole image must remain visible.

Background layers are painted with the first listed image on top. Always provide a usable background-color beneath an image so text remains readable while it loads or if it fails.

Borders occupy space in the box model:

.card {
  border: 1px solid currentColor;
}

currentColor uses the element’s computed color, which keeps borders coordinated with themes. Decorative background images need no alt text, but meaningful images belong in HTML where they can have accessible alternatives.

Borders participate in box sizing and can move surrounding layout when added on hover. Reserve the border’s space from the initial state, or use an outline when the effect should not affect dimensions. Outlines are also appropriate for focus indicators because they do not change layout and should not be clipped.

Disable the background image in DevTools and resize the box. Verify the color fallback, text contrast, crop, and border-box dimensions rather than checking only the ideal image state.