EthicsComputerCourses
Join training
  1. Tutorials
  2. CSS Tutorial
  3. Values, Colour & Text

Backgrounds & Gradients

CSS · Lesson 11 of 55 7 min read Updated

Backgrounds give sections their character: a soft colour behind a pricing table, a photo behind a hero heading, a gradient on a button. Modern CSS can draw many effects that once needed image files, and it can stack several backgrounds on one element.

In this lesson you will set background colours and images, control how images are sized and positioned, layer backgrounds, and draw linear, radial and conic gradients.

Background colour

background-color fills the element's box behind its content and padding (and under the border).

CSS
.notice {
  background-color: oklch(96% 0.03 90);
}

Always pair a background colour with a text colour that has enough contrast, as you learned in CSS Colours.

Background images

background-image places an image behind the content. By default the image repeats like tiles to fill the box, starting from the top-left corner. Four more properties control it:

  • background-repeat: repeat (default), no-repeat, repeat-x or repeat-y.
  • background-position: where the image sits, such as center, top right or 50% 20%.
  • background-size: cover fills the whole box and crops the overflow; contain fits the whole image inside, which may leave empty space; or give a size like 200px auto.
  • background-attachment: whether the image scrolls with the page. You will rarely need it.
HTMLTry it yourself
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background image</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      min-height: 60svh;
      display: grid;
      place-content: center;
      text-align: center;
      color: white;
      padding: 2rem;
      background-color: #2c4a6b;   /* shown while the image loads */
      background-image:
        linear-gradient(rgb(0 0 0 / 55%), rgb(0 0 0 / 20%)),
        url("https://course.ethicscomputer.in/assets/samples/landscape.svg");
      background-size: cover;
      background-position: center;
    }
    .hero h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin: 0; }
  </style>
</head>
<body>
  <section class="hero">
    <h1>Treks from Manali</h1>
    <p>Weekend batches every Friday from June to September.</p>
  </section>
</body>
</html>

There are two backgrounds here, separated by a comma. The first one listed is drawn on top: a dark, semi-transparent gradient that sits over the photo so the white heading stays readable. background-size: cover keeps the picture filling the hero at any window size. Resize the window to see it crop rather than stretch.

The background-color is a fallback that shows while the image downloads, or if it fails to load. Always set one when you put text on top of an image.

The background shorthand

The background shorthand sets several background properties in one line. When you give both position and size, separate them with a slash:

CSS
.banner {
  background: url("https://course.ethicscomputer.in/assets/samples/landscape.svg") center / cover no-repeat, #2c4a6b;
}

Read it as: this image, positioned at the centre, sized to cover, not repeated; and below it, a solid colour. A colour can only appear in the last (bottom) layer. Be careful with the shorthand: any part you leave out is reset to its default, which can undo a background-size you set earlier.

Gradients

A gradient is an image the browser draws from colours. You use it anywhere an image goes, usually in background-image or background. No file is downloaded, and it stays sharp at any size.

Linear gradients

linear-gradient() blends colours along a straight line. Give a direction (to right, to bottom right) or an angle (135deg), then two or more colour stops.

CSS
.a { background: linear-gradient(to right, #ff9933, #ffffff, #138808); }
.b { background: linear-gradient(135deg, oklch(65% 0.2 30), oklch(55% 0.2 300)); }
.c { background: linear-gradient(to right, #1d3557 50%, #e63946 50%); }  /* hard edge */

When two stops share a position, as in .c, the colours meet with a sharp edge instead of a blend. That trick draws stripes and split backgrounds.

Radial and conic gradients

radial-gradient() spreads out from a centre point in a circle or ellipse. conic-gradient() sweeps colours around a centre point, like the hands of a clock, which is perfect for pie charts.

HTMLTry it yourself
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gradients</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; }
    .box { width: 9rem; height: 9rem; border-radius: 12px; display: grid; place-content: center; font-weight: bold; }
    .linear  { background: linear-gradient(135deg, oklch(80% 0.15 85), oklch(60% 0.2 30)); }
    .radial  { background: radial-gradient(circle at 30% 30%, white, oklch(70% 0.12 230) 60%, oklch(40% 0.12 260)); }
    .conic   { background: conic-gradient(#e63946 0 40%, #f4a261 0 70%, #2a9d8f 0); border-radius: 50%; }
    .stripes { background: repeating-linear-gradient(45deg, #f1f3f6 0 10px, #dde3ea 10px 20px); }
  </style>
</head>
<body>
  <div class="box linear">Linear</div>
  <div class="box radial">Radial</div>
  <div class="box conic">Conic</div>
  <div class="box stripes">Stripes</div>
</body>
</html>

The conic gradient is a pie chart with no image and no JavaScript: red runs from 0 to 40%, orange from 40% to 70% and teal for the rest. A stop position of 0 means "start exactly where the previous colour ended", which creates the hard edges. repeating-linear-gradient() repeats its pattern forever, here making diagonal stripes every 20 pixels.

Smoother blends

Gradients between two very different colours can look dull or greyish in the middle. You can ask the browser to blend in the OKLCH colour space instead, which usually keeps the middle colours brighter:

CSS
.vivid {
  background: linear-gradient(to right in oklch, oklch(60% 0.2 25), oklch(60% 0.2 260));
}

This syntax is supported in current versions of all major browsers. Older browsers ignore the whole declaration, so put a plain gradient or colour on an earlier line as a fallback.

Common mistakes

  • Text on a busy photo. Add a dark or light gradient layer on top of the image, and a fallback background-color.
  • Forgetting no-repeat. A small image tiles across the whole box by default.
  • Shorthand resetting values. background: red; after background-size: cover; resets the size. Use background-color when you only want to change the colour.
  • Wrong layer order. The first background in the list is on top, the last is at the bottom.
  • Meaningful images as backgrounds. Use <img> with alt for content images.

Key points

  • background-color fills the box; set one as a fallback whenever you use an image.
  • background-size: cover fills the box and crops; contain shows the whole image.
  • Several backgrounds can be stacked with commas; the first one listed is on top.
  • linear-gradient(), radial-gradient() and conic-gradient() draw images from colours.
  • Two stops at the same position create a hard edge, useful for stripes and charts.
  • Background images are decorative; content images belong in <img> with alt text.

Exercise

Create a festival banner for a Lucknow sweet shop. Use the landscape image from the first example as a background image that covers the banner and stays centred. Add a gradient layer on top that goes from 60% transparent dark orange at the left to fully transparent at the right, so white text on the left stays readable. Add a fallback colour.

Show solution
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Festival banner</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .banner {
      padding: 3rem 1.5rem;
      color: white;
      background:
        linear-gradient(to right, oklch(45% 0.15 50 / 60%), transparent),
        url("https://course.ethicscomputer.in/assets/samples/landscape.svg") center / cover no-repeat,
        oklch(45% 0.15 50);
    }
  </style>
</head>
<body>
  <section class="banner">
    <h1>Lucknow Mithai Ghar</h1>
    <p>Fresh malai gilori every evening this Diwali week.</p>
  </section>
</body>
</html>

The gradient is listed first, so it is drawn above the photo, and the solid colour is the bottom layer that shows if the image fails to load.

Quick Quiz

1. Which background-size value fills the whole element, cropping the image if needed?

2. In background-image: url(a.svg), url(b.svg); which image is on top?

3. What does conic-gradient(red 0 25%, blue 0) draw?

4. Where should a product photo with important details go?

Learn CSS with a mentor

Free lessons get you started. Our Full Stack Web Development training adds real projects and code reviews from working developers.

  • Project-based learning
  • Mentor code reviews
  • Free counselling call
Get course details +91 90532 10052