CSS Backgrounds

Every element has a background — by default it is transparent, so you see whatever is behind it. The background properties let you paint that space: a flat colour, a picture, a gradient, or all three together. A good background makes a page feel finished; a bad one makes the text unreadable.

Diagram — see how it fits together

The background properties

Syntax — a hero banner

.hero {
  background-color: #1e3a8a;
  background-image: url("campus.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Read it top to bottom: paint the banner dark blue first (so the text is readable even if the picture fails to load), then place the photo on top, do not repeat it, centre it, and stretch it until it covers the whole banner. The colour is the safety net; the picture is the decoration.

The shorthand

All six properties can be written in one line, in this order: colour, image, repeat, attachment, position, then a slash, then size.

.hero {
  background: #1e3a8a url("campus.jpg") no-repeat center / cover;
}

Shorthand is shorter, but it is also easier to get wrong — one word in the wrong place and the whole line is ignored. While learning, write the long form. Use the shorthand only when you are sure of the order.

Gradients — backgrounds without any picture

A gradient is a smooth blend from one colour to another, and CSS draws it for you — no image file needed. A gradient is a background-image, so it sits in that property.

.sunset {
  background-image: linear-gradient(to right, orange, pink);
}
.ball {
  background-image: radial-gradient(circle, yellow, red);
}

linear-gradient blends in a straight line — to right, to bottom, or an angle like 45deg. radial-gradient blends out from a centre point, like a ball lit from above. You can blend three or more colours by listing them: linear-gradient(red, yellow, green).

Common mistakes

• Forgetting no-repeat — by default a background picture repeats in both directions, so a small photo tiles across the whole element.
• Writing a wrong image path — the url() is relative to the CSS file, not the HTML file. If the CSS is in a different folder, the path must account for that.
• No fallback colour — if the picture fails to load, dark text on a transparent background can become unreadable. Always set a background-color first.
• Using background shorthand in the wrong order — the browser ignores the whole line instead of guessing what you meant.
• Putting text over a busy picture with no overlay — the words disappear into the photo. A dark gradient or a semi-transparent colour behind the text fixes it.

Remember

• background-color is the safety net — set it before any picture.
• background-repeat: no-repeat stops the picture from tiling.
• background-size: cover fills the area; contain shows the whole picture.
• Gradients are background-image values — no image file needed.
• Backgrounds are decoration; real content pictures belong in an <img> tag.

Example explained

• .hero { background-image: linear-gradient(to right, #f97316, #ec4899); } — a gradient background, orange blending into pink, drawn by CSS with no picture file at all.
• .hero { color: white; } — white text on the bright gradient, so the words stay readable.
• .pattern { background-color: #fef3c7; background-image: radial-gradient(circle, #fde68a 20%, transparent 20%); background-size: 40px 40px; } — a pale yellow base with small dots, repeated every 40 pixels like a polka-dot pattern.
• .plain { background-color: #e0f2fe; } — the simplest background: one flat colour, no picture, no gradient.