BeingXpert Learn & Build Future

7. CSS Backgrounds

What you will learn

  • Background colours and images
  • How to control repeating, position, and size
  • How to make gradients
  • The background shorthand

Background colour

Example

<style>
  div {
    background-color: #eaf5ff;
    padding: 20px;
  }
</style>

<div>A box with a light blue background.</div>

Output

A box with a light blue background.

Background image

background-image uses a picture file with url(). By default the picture repeats to fill the element.

Syntax

.hero {
  background-image: url("images/mountains.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
Property Common values What it does
background-repeat repeat, no-repeat, repeat-x Whether the image tiles
background-position center, top right, 20px 40px Where the image sits
background-size cover, contain, 100px The size of the image
background-attachment scroll, fixed Whether it scrolls with the page
  • cover scales the image to fill the whole element, cropping the edges if needed.
  • contain scales it to fit entirely inside, which may leave empty space.

Text over a background image must stay readable. Add a dark overlay, or choose a calm part of the picture. Only use images you made or have permission to use.

Gradients

A gradient is a smooth blend between colours. It needs no image file.

Example

<style>
  .banner {
    background-image: linear-gradient(to right, #0d6efd, #082b59);
    color: white;
    padding: 30px;
  }
</style>

<div class="banner">A blue gradient banner</div>

Output

A blue gradient banner

Radial gradient and a repeating pattern

Example

<style>
  .glow {
    background-image: radial-gradient(circle, #ffffff, #0d6efd);
    padding: 40px;
    text-align: center;
  }
  .stripes {
    background-image: repeating-linear-gradient(45deg, #eaf5ff, #eaf5ff 10px, #cfe6ff 10px, #cfe6ff 20px);
    padding: 30px;
  }
</style>

<div class="glow">Radial gradient</div>
<div class="stripes">Striped pattern</div>

Output

Radial gradient
Striped pattern

A dark overlay on an image

Layer a semi-transparent gradient over an image by listing both in background-image. The first one sits on top.

Syntax

.hero {
  background-image:
    linear-gradient(rgba(8, 43, 89, 0.7), rgba(8, 43, 89, 0.7)),
    url("images/mountains.jpg");
  background-size: cover;
  color: white;
}

The shorthand

You can combine several background properties in one:

Syntax

background: #eaf5ff url("images/dots.png") no-repeat center / cover;

Common mistakes

  • A wrong image path, so no background appears.
  • Forgetting background-size: cover, so only part of a big image is visible.
  • White text over a light image, which is unreadable.
  • Using huge image files, which slow the page. Compress them first.

Exercise

Give .banner a gradient that runs from top to bottom (to bottom) from #eaf5ff to #0d6efd, with 30px of padding.

Show solution 
<style>
  .banner {
    background-image: linear-gradient(to bottom, #eaf5ff, #0d6efd);
    padding: 30px;
  }
</style>
<div class="banner">My banner</div>

Knowledge check

1. Which property stops a background image from tiling?

background-repeat: no-repeat

2. What does background-size: cover do?

It scales the image to fill the whole element, cropping if needed.

3. Do gradients need an image file?

No.

Summary

  • Use background-color, background-image, and the related repeat, position, and size properties.
  • Gradients are generated by CSS.
  • Keep text readable over any background.
Scroll to Top