CSS — Backgrounds Advanced

Multiple background layers

Comma-separate layers; first = painted on top:

.hero {
    background-image:
        linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.2)),   /* scrim on top */
        url("mountain.jpg");                                /* photo below */
    background-size: cover;
    background-position: center;
}

The dark-scrim-over-photo recipe — every landing page's readability trick.

Each layer gets its own size/position/repeat (comma-matched):

.decorated {
    background-image:
        radial-gradient(circle at 80% 20%, rgba(45,212,191,.3), transparent 50%),
        url("noise.png"),
        linear-gradient(#f8fafc, #e2e8f0);
    background-size: auto, 200px 200px, cover;
    background-repeat: no-repeat, repeat, no-repeat;
}

background-clip — where the paint reaches

.text-box {
    background: teal;
    color: white;
}

.border-box   { background-clip: border-box; }   /* default — under border too */
.padding-box  { background-clip: padding-box; }  /* stops at padding edge      */
.content-box  { background-clip: content-box; }

/* gradient TEXT (the famous trick): */
.headline {
    background: linear-gradient(90deg, teal, purple);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

background-origin vs clip

origin sets where the background starts measuring from; clip sets where it's cut off:

.box {
    background-origin: content-box;    /* image anchored to content area */
    background-clip: padding-box;      /* but clipped at padding edge    */
}

Subtle pair — mostly matters with borders/padding present.

Fixed attachment & parallax

.parallax-section {
    background-image: url("sky.jpg");
    background-attachment: fixed;      /* bg stays put while page scrolls */
    background-size: cover;
}

(Content slides over a stationary backdrop.) Mobile browsers often ignore fixed for performance — provide a graceful fallback (scroll normally).

Local attachment scrolls WITH the box but not its own content — niche text-pattern trick.

Blend modes

Mix backgrounds with what's beneath:

.tinted {
    background-color: #0d9488;
    background-blend-mode: multiply;    /* teal × photo = moody duotone */
    background-image: url("photo.jpg");
}

Mode	Effect
multiply	darker, ink-like
screen	lighter
overlay	contrast punch
luminosity	takes brightness of top layer

Duotone hero sections in two declarations.

Performance notes

1. fixed attachment + large areas = scroll jank on mobile
2. Many huge layered images cost memory — compress sources
3. Prefer gradients (zero bytes) over texture PNGs where possible

Recipes worth stealing

/* subtle paper grain over flat color */
.grain {
    background-image: url("grain.png"), #fafaf9;
}

/* diagonal accent stripe on cards */
.accent {
    background-image: linear-gradient(135deg, var(--brand) 10%, transparent 10%);
}

/* dotted pattern via radial-gradient — no image at all */
.dots {
    background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1.5px);
    background-size: 16px 16px;
}

Mini Practice

1. Hero with scrim layer + positioned photo.
2. Three-layer composition with per-layer sizing.
3. Gradient-clipped headline text.
4. Duotone via background-blend-mode.
5. Pure-CSS dot grid using repeating radial-gradient.
6. Parallax band between two normal sections.

Next: masking →