background

Basic Syntax

/* Color only */
.box {
    background-color: #3b82f6;
}

/* Gradient */
.hero {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

/* Full shorthand */
.card {
    background: url('pattern.png') no-repeat center / cover #0f172a;
}

Gradients

The most useful background feature after solid colors.

/* Linear — angle and two colors */
.hero {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

/* Directional keywords */
.button {
    background: linear-gradient(to right, #10b981, #3b82f6);
}

/* Three-color gradient */
.rainbow {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
}

/* Radial — from center outward */
.glow {
    background: radial-gradient(circle, #3b82f6, #020617);
}

/* Conic — around a center point */
.pie {
    background: conic-gradient(#3b82f6, #8b5cf6, #ec4899, #3b82f6);
}

/* Hard color stops (stripes, not smooth blends) */
.stripes {
    background: linear-gradient(
        45deg,
        #3b82f6 25%,
        #1e40af 25% 50%,
        #3b82f6 50% 75%,
        #1e40af 75%
    );
}

Background Image with Cover

The classic hero background pattern.

.hero {
    background-image: url('/images/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* Shorthand */
.hero {
    background: url('/images/hero.jpg') center / cover no-repeat;
}

background-size values:

• cover — scale to cover, crop excess. Best for hero images.
• contain — scale to fit, leave empty space. Best for logos.
• auto — natural size.
• 100% 100% — stretch to fill (may distort).

Multiple Backgrounds

Layer several images, gradients, or colors with commas.

.card {
    background:
        url('icon.svg') no-repeat top right,
        linear-gradient(135deg, #1e293b, #0f172a);
}

/* Text overlay pattern with a dark scrim */
.hero {
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
        url('/images/hero.jpg') center / cover no-repeat;
}

The first layer is on top. The last layer is at the bottom.

background-clip: text — Gradient Text

Fill text with a gradient or image.

.gradient-text {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

Sticky Background Attachment

.parallax {
    background: url('/images/bg.jpg') center / cover fixed;
}

background-attachment: fixed creates a parallax effect where the background doesn't scroll with the page. Note: it's often broken on mobile — test carefully or disable it below a certain breakpoint.