🖼️

Backgrounds & Gradients

Paint behind your content. Learn background-image, gradients, sizing, positioning, and the layered overlays that power every modern hero section.

Prerequisites:📦Tag Builder 📐Box Model Explorer

Why Backgrounds Matter

Backgrounds are how a flat web page becomes a recognisable brand. See why every site you visit puts effort into the layer behind the text.

background-image: A Photo Behind Anything

Use background-image to paint a picture behind any element. Learn the url() syntax and why a background image is not the same as an <img> tag.

Sizing & Positioning Backgrounds

Most background images do not match the element's size. Learn cover vs contain and how to control which part of the image stays visible.

background-repeat: Tile, Stretch, or Stop

By default a small background image tiles to fill the box. Learn to control that tiling — including the very common bug of an accidentally repeating photo.

Linear Gradients

A gradient is an image you generate with code instead of fetching from a server. Master linear-gradient — the workhorse of every modern landing page.

Radial & Conic Gradients

Beyond straight lines, CSS can paint circles (radial-gradient) and pie slices (conic-gradient). Learn the syntax and a common typo that breaks them.

Layered Backgrounds: Stacking Images & Gradients

The most useful background trick in modern web design — put a dark gradient over a photo so white text becomes readable. You will use this on every hero you build.

The background Shorthand

In real codebases you will see one line that does the work of five. Learn to read and write the background shorthand without losing track of which value is which.

Capstone: A Real Hero Section

Stack everything you have learned — photo, gradient overlay, sizing, positioning — into a hero section you would actually ship.

Codelab: Build a Gradient Pricing Card

Step out of the platform and build a real pricing card with gradient buttons in a local HTML file. End-to-end: terminal, editor, browser refresh.