CSS Backgrounds

CSS Backgrounds: Colors, Images, Positioning, and Sizing

CSS background properties paint the surface behind an element's content and padding box. Whether you are styling a solid dark card, a subtle dot pattern, or a full-bleed hero banner image, controlling background sizing and fallback colors keeps layouts crisp across every screen ratio.

Core CSS Background Properties

• background-color: Sets a solid or translucent fill color. Always pair a dark or light fallback background-color with any background-image in case the photo loads slowly.
• background-image: Loads an image via url('/images/hero.webp') or generates a CSS gradient (linear-gradient(...)).
• background-repeat: Defaults to repeat tiling; set no-repeat for single banners and logos.
• background-position: Anchors the image focal point (center, top right, or 50% 30%).
• background-size: cover scales the image to fill the entire container without stretching (cropping edges if needed), while contain fits the entire image inside without cropping.

.hero-banner {
    background-color: #0f172a;
    background-image: linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.85)),
        url("/images/hero-workspace.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #f8fafc;
    padding: 64px 24px;
    border-radius: 12px;
}

Layering Multiple Backgrounds

Notice in the example above how CSS accepts comma-separated layers in background-image—the dark translucent gradient sits on top of the photograph, keeping white headline text easy to read regardless of bright spots in the photo.

Common Mistakes to Avoid

• Using background-attachment: fixed carelessly on mobile: Fixed backgrounds jitter or fail completely on iOS Safari; keep scroll as the mobile default.
• Putting informative photos in CSS background-image instead of HTML img: Screen readers and search engines cannot read CSS backgrounds, so use HTML img with alt text for meaningful content images.
• Using unquoted relative paths wrong in external CSS: url(...) inside /css/app.css resolves relative to the /css/ folder, not the HTML page.

Frequently Asked Questions

What is the difference between background-size cover and contain?

cover fills the whole container edge-to-edge while cropping excess edges, whereas contain shows the full image without cropping even if empty space remains.

Can I use the background shorthand property safely?

Yes—write background: #0f172a url("/images/bg.webp") center / cover no-repeat; (remembering the / slash separating position from size).