CSS Backgrounds

Background properties control what appears behind the content of an element.

Background Colour

background-color fills the element's box with one colour. You can set it on the whole page (body) or on any element.

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #f1f5f9;
}
.card {
  background-color: white;
  padding: 20px;
}
.warning {
  background-color: #fff3cd;
  padding: 10px;
}
</style>
</head>
<body>

<div class="card">
  <h2>Fee Reminder</h2>
  <p class="warning">Please submit the form before Friday.</p>
</div>

</body>
</html>

Try it Yourself »

Gradients

A gradient is a smooth change from one colour to another. In CSS it is used like a background image.

linear-gradient(direction, colour1, colour2) goes in a straight line
radial-gradient(colour1, colour2) spreads out from the centre

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
.banner {
  background-image: linear-gradient(to right, #264de4, #06b6d4);
  color: white;
  padding: 30px;
  text-align: center;
}
.circle {
  background-image: radial-gradient(gold, darkorange);
  height: 120px;
  margin-top: 10px;
}
</style>
</head>
<body>

<div class="banner">Summer Coding Camp 2026</div>
<div class="circle"></div>

</body>
</html>

Try it Yourself »

Background Images

background-image puts a picture behind the content. You give it the image address with url():

Example

css

.hero {
  background-image: url("karachi-beach.jpg");
}

Three more properties control how the image is shown:

Property	Common values	What it does
`background-repeat`	`repeat`, `no-repeat`, `repeat-x`, `repeat-y`	Whether the image tiles
`background-position`	`center`, `top right`, `50% 20%`	Where the image sits
`background-size`	`cover`, `contain`, `200px`	How big the image is
`background-attachment`	`scroll`, `fixed`	Whether it moves when you scroll

background-size: cover fills the whole box (some of the picture may be cut). contain shows the whole picture (some space may stay empty).

When you put text on top of an image, also set a background-color. If the image fails to load, the text will still be readable.

The Background Shorthand

You can set several background properties in one line with background:

Example

css

.hero {
  background: #222222 url("beach.jpg") no-repeat center / cover;
}

The value after the / is the size. The order of most values is flexible, but this order is easy to remember: colour, image, repeat, position / size.

Repeating Patterns

A small gradient that repeats can make a pattern without any image file:

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
.stripes {
  height: 150px;
  background-image: linear-gradient(45deg, #264de4 25%, transparent 25%);
  background-size: 30px 30px;
  background-repeat: repeat;
}
</style>
</head>
<body>

<div class="stripes"></div>

</body>
</html>

Try it Yourself »

Exercise

Which value of background-size makes an image fill the whole element, even if part of it is cut off?

containcoverrepeatauto