Background Color

The background-color property sets the base fill colour of an element's background area, including its padding box but not the margin.

Interaction with Transparency

If a background-image is present, background-color shows through transparent parts of that image and serves as a fallback when the image fails to load.

Color Values

Any CSS colour value is accepted: hex, rgb(), hsl(), named colours, or transparent (the default for most elements). The keyword initial resets to transparent.

Gradient as Background

While technically a background-image, CSS gradients are the most common way to achieve non-solid background fills and can be layered above a solid background-color.

Example

/* Simple solid background */
.card {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
}

/* Translucent background — text stays opaque */
.frosted {
    background-color: rgb(255 255 255 / 0.75);
    backdrop-filter: blur(12px);
}

/* Gradient + solid colour fallback */
.hero {
    background-color: #1a73e8; /* fallback */
    background-image: linear-gradient(135deg, #1a73e8, #0d47a1);
}

/* Dark mode via custom property */
:root {
    --surface: #ffffff;
}
@media (prefers-color-scheme: dark) {
    :root { --surface: #1e1e1e; }
}
.surface {
    background-color: var(--surface);
}

CSS

Full Editor

Pro Tip

Always set a background-color alongside a background-image — it acts as an instant fallback while the image loads and ensures text remains readable if the image is unavailable.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned