CSS Tutorial

CSS Backgrounds

CSS backgrounds let you fill elements with color or images. A good background sets the mood of a page, and CSS gives you fine control over how it looks and repeats.

The background-color property

The simplest background is a solid color, set with background-color. It accepts any CSS color value: a name, HEX, RGB or HSL. This is the most common background style.

Solid background colors

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: #eef7ff;
    font-family: Arial, sans-serif;
  }
  .card {
    background-color: #2b5cff;
    color: white;
    padding: 20px;
    border-radius: 8px;
  }
</style>
</head>
<body>
  <h1>Background Color</h1>
  <div class="card">This box has a blue background.</div>
</body>
</html>

The background-image property

You can set an image as the background using background-image with the url() function. By default the image repeats (tiles) to fill the element.

Setting a background image

body {
  background-image: url("photo.jpg");
}

Controlling repeat and position

Background images tile by default. Use background-repeat to control this (repeat, repeat-x, repeat-y or no-repeat), and background-position to place the image (for example, center or top right). background-size can stretch or fit the image, with cover being very popular.

A common full-cover background

.hero {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

ℹ️

Background images from url() will not appear in this live editor because the image files do not exist here. Use the color and gradient examples to see visible results.

Gradients as backgrounds

CSS can generate smooth color gradients with no image file at all, using linear-gradient(). It counts as a background image, so it goes in background or background-image.

A CSS gradient background

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .banner {
    background-image: linear-gradient(to right, #2b5cff, #7b2bff);
    color: white;
    padding: 40px;
    text-align: center;
    font-family: Arial, sans-serif;
    border-radius: 10px;
  }
</style>
</head>
<body>
  <div class="banner">
    <h1>Gradient Background</h1>
    <p>Made purely with CSS, no image needed.</p>
  </div>
</body>
</html>

The background shorthand

You can combine several background properties into the single background property to keep your CSS short.

Shorthand background

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

Background properties reference

Property	Purpose	Example value
background-color	Solid fill color	#eef7ff
background-image	Image or gradient	url("pic.jpg")
background-repeat	Whether the image tiles	no-repeat
background-position	Where the image sits	center
background-size	How the image is scaled	cover

💡

When using a background image behind text, set a fallback background-color too, so the text stays readable while the image loads or if it fails.

Key points

background-color fills an element with a solid color.
background-image adds an image or gradient.
background-repeat controls tiling; no-repeat shows it once.
background-size: cover fills the element neatly.
The background shorthand combines these into one line.