Backgrounds and gradients

What you will learn

• background-color and background-image
• linear-gradient() and radial-gradient()
• background-size, background-repeat and background-position

Understand the idea

Every element has a background, transparent by default. background-color fills it with one colour. background-image puts an image or a gradient there, and the image sits on top of the colour, so a colour makes a good fallback.

A gradient is an image the browser draws itself, so it needs no file and never goes blurry. linear-gradient(135deg, #6c4de6, #ff5d8f) blends from one colour to another along a line at the angle you choose (90deg goes left to right, 180deg top to bottom). Add more colours for more stops. radial-gradient(circle, yellow, orange) spreads out from the centre.

Three properties control a background image. background-size is cover (fill the box, cropping if needed), contain (show all of it) or a size such as 100px 50px. background-repeat decides if it tiles (repeat, no-repeat). background-position places it (center, top right). A single background shorthand can set several at once, but the long-hand names are clearer while you learn.

Example

.hero {
  background-image: linear-gradient(135deg, #6c4de6, #ff5d8f);
  background-size: cover;
  color: white;
  padding: 24px;
}

.card {
  background-color: #e6fcf5;
}

Your turn: code to type and practise

Give .hero a background-image that uses linear-gradient, set its background-size, and give .card a background-color. Use the long-hand properties.

← Adding CSS: three ways and three selectorsFonts and text styling →