CSS — Backgrounds

The background family

CSS controls everything behind an element's content:

.hero {
    background-color: #0f172a;                 /* fallback color */
    background-image: url("stars.png");        /* image layer   */
}

What the browser displays

(A dark navy band with a star pattern tiled across it.)

Background images

.banner {
    background-image: url("images/mountain.jpg");
    height: 300px;
}

Notes that save debugging time:

• Path works like img src — relative to the CSS file (or the page for inline styles)
• If the image is missing you get the background-color only (always set one as fallback)
• By default the image tiles to fill the box

Controlling repetition

.tiled    { background-repeat: repeat; }      /* default        */
.row      { background-repeat: repeat-x; }    /* horizontal only */
.column   { background-repeat: repeat-y; }    /* vertical only   */
.single   { background-repeat: no-repeat; }   /* shown once      */

no-repeat is what you want 90% of the time with photos.

Positioning

.banner {
    background-position: center center;   /* or top, bottom,
                                             left, right, or px/% */
}

The first value is horizontal, second vertical. center center keeps subjects framed when boxes resize.

Sizing

.cover {
    background-size: cover;      /* fill box, crop overflow — hero standard */
}
.contain {
    background-size: contain;    /* fit entirely inside, may letterbox */
}
.exact {
    background-size: 200px 100px;
}

Value	Behavior	Typical use
cover	Fills box, crops excess	Hero banners, cards
contain	Whole image visible	Logos on colored bands

Fixed vs scrolling

.parallax {
    background-attachment: fixed;   /* page scrolls, bg stays */
}

Creates the classic parallax effect where content slides over a stationary backdrop.

The shorthand

All five properties in one line:

.hero {
    background: #0f172a url("stars.png") no-repeat center / cover fixed;
}
/*          color            image    repeat     pos  size attach */

Order-flexible but size pairs with position after a slash. Perfectly fine to skip shorthand until you're comfortable with the longhands.

Gradients — backgrounds without images

CSS paints gradients natively:

.sunset {
    background-image: linear-gradient(to right, orange, pink);
}
.fade {
    background-image: linear-gradient(to bottom, black, transparent);
}
.angle {
    background-image: linear-gradient(45deg, teal, navy);
}

Multiple stops allowed:

.rainbow {
    background-image: linear-gradient(to right,
        red, yellow, lime, cyan, blue);
}

Gradients are crisp at any resolution, weigh zero kilobytes, and pair beautifully with transparency:

.hero {
    background-image:
        linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.2)),
        url("mountain.jpg");
    background-size: cover;
}

A dark scrim over a photo so white headline text stays readable — used on virtually every landing page.

Mini Practice

1. Build a 300px hero with background: url(...) no-repeat center / cover
2. Add the dark gradient scrim over it and watch text contrast improve
3. Make a diagonal two-color gradient button
4. Create a subtle repeating dot pattern using a tiny PNG tiled by default
5. Try background-attachment: fixed and scroll — hello, parallax

Next: borders →