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.
The layer behind the words
A page with no background is a sheet of white paper with text on it. Add a background and that same content suddenly feels like Spotify, Stripe, or your bank. Backgrounds carry brand, set mood, and guide the eye toward the parts of the page that matter.
CSS gives you four ways to fill the space behind an element: a flat background-color, an image with background-image, a generated gradient (also via background-image), or several of these stacked together. The browser treats every element as a rectangle that has a paintable background — even if you have not painted one yet.
Every element has a background by default — it is just transparent. That means a child's background can show the parent's background through it, which is how overlay tricks work later in this module.