How to set backgrounds

Provide a base color

A background color appears behind any background image and provides a fallback while imagery loads.

.hero {
  background-color: #16324f;
  color: white;
}

Add and size an image

cover fills the box and may crop; contain shows the whole image and may leave empty space.

.hero {
  background-image: url("/images/mountains.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Create a gradient

Gradients are generated images and can be layered with image URLs.

.banner {
  background: linear-gradient(135deg, #075985, #7c3aed);
}

Use backgrounds appropriately

• Keep meaningful images in HTML with useful alt text
• Ensure text remains readable over every part of an image
• Optimize large files for download size
• Avoid fixed backgrounds that perform poorly or distract on mobile