Multiple Backgrounds in CSS

Multiple Backgrounds in CSS (Beginner-Friendly Guide)

Have you ever seen a webpage with a pattern in the corner, a gradient behind it, and maybe even an image on top—and wondered how they did that? The secret is multiple backgrounds in CSS.

In this guide, you’ll learn how to:

Add more than one background to the same element
Layer images, colors, and gradients together
Control where each background goes and how it behaves

You don’t need any prior coding experience. We’ll go step-by-step, and you can follow along in your browser.

What Are Multiple Backgrounds?

In CSS, the background property controls what appears behind your content. Usually, you might set just one background color or one image.

But CSS also lets you apply several backgrounds at once to the same element. You can stack images, gradients, and colors in layers. This is great for creating richer, more interesting designs without extra HTML.

To do this, you separate background values with commas.

Example idea:

Top layer: a small icon image in the corner
Middle layer: a gradient
Bottom layer: a solid color

Getting Set Up (Super Simple)

To follow along, you can:

Open a code editor (or just Notepad/TextEdit).
Create a file called index.html.
Open it in your web browser (Chrome, Firefox, Edge, etc.).

We’ll put our CSS inside a <style> tag for simplicity.

Start with this basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Multiple Backgrounds in CSS</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .box {
      width: 100%;
      height: 300px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
    }
  </style>
</head>
<body>
  <div class="box">Multiple Backgrounds Demo</div>
</body>
</html>

You should see a white page with text centered in a tall box.

Example 1: Two Simple Backgrounds

Let’s start by adding two backgrounds: a gradient and a solid color.

Add this CSS inside the <style> tag, replacing the existing .box rule:

.box {
  width: 100%;
  height: 300px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;

  /* Two backgrounds: gradient (top layer), solid color (bottom layer) */
  background-image: 
    linear-gradient(135deg, rgba(255, 0, 150, 0.7), rgba(0, 120, 255, 0.7)),
    #222222; /* dark gray */

  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}

What’s happening here?

background-image: has two values, separated by a comma.
- First value (top layer): a gradient from pink to blue.
- Second value (bottom layer): a solid color (#222222).
background-repeat: also has two values.
- no-repeat, no-repeat means both backgrounds should not tile/repeat.
background-size: cover, cover; makes each background stretch to cover the box.

Result: You’ll see a colorful gradient over a dark background. The gradient has some transparency (0.7), so the dark layer helps deepen the colors.

Important Concept: Layer Order

When you use multiple backgrounds:

The first background you write is on top.
The last background you write is on the bottom.

Think of it like stacking sheets of paper:

background-image: top-layer, middle-layer, bottom-layer;

If a top layer has transparent areas, you’ll see whatever is beneath it.

Example 2: Adding an Icon in the Corner

Now, let’s add a small image on top of the gradient. You can use any small PNG/JPG you like (e.g., star.png). Just place it in the same folder as your index.html.

Update .box to this:

.box {
  width: 100%;
  height: 300px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;

  /* Three layers now: icon (top), gradient (middle), solid color (bottom) */
  background-image:
    url('star.png'),
    linear-gradient(135deg, rgba(255, 0, 150, 0.7), rgba(0, 120, 255, 0.7)),
    #222222;

  /* Repeat settings for each background */
  background-repeat: no-repeat, no-repeat, no-repeat;

  /* Size each background */
  background-size: 80px 80px, cover, cover;

  /* Position each background */
  background-position: 
    right 20px top 20px, /* icon in the top-right corner */
    center,              /* gradient centered */
    center;              /* solid color just fills */
}

What’s new?

url('star.png') is the top layer.
background-size: 80px 80px, cover, cover;
- The icon is 80x80 pixels.
- The gradient and color still cover the entire box.
background-position: controls where each layer sits.
- right 20px top 20px puts the icon near the top-right corner.

Result: The box now has a small icon over the gradient, which sits on top of the dark base color.

Example 3: Pattern + Gradient + Color

Now we’ll create a more stylish effect: a subtle pattern on top of our gradient.

Find or create a tiny pattern image (like pattern.png, maybe 20x20 pixels). Then update .box again:

.box {
  width: 100%;
  height: 300px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;

  /* Pattern (top), gradient (middle), solid color (bottom) */
  background-image:
    url('pattern.png'),
    linear-gradient(135deg, rgba(255, 0, 150, 0.7), rgba(0, 120, 255, 0.7)),
    #222222;

  /* Pattern repeats, others do not */
  background-repeat: repeat, no-repeat, no-repeat;

  /* Pattern uses its natural size; others cover */
  background-size: auto, cover, cover;

  /* Positions */
  background-position: center, center, center;
}

What’s happening now?

The pattern is the top layer.
background-repeat: repeat makes the pattern tile across the box.
background-size: auto for the pattern means it uses its original image size.

Result: A textured pattern lies over a glowing gradient and dark base color. All of this is done with just one div and a few lines of CSS.

Try It Yourself: Play With Layers

Here are a few simple experiments you can try. Change values and refresh your browser to see the difference.

Change the gradient direction:

linear-gradient(45deg, rgba(255, 0, 150, 0.7), rgba(0, 120, 255, 0.7))

Try 0deg, 90deg, 180deg and see how the angle changes the look.

Move the pattern:

background-position: left top, center, center;

Put the pattern at the top-left and see what happens.

Make the pattern larger (if your image allows it):

background-size: 40px 40px, cover, cover;

This scales the pattern tile.

Add a second icon:

You can expand background-image with another url() on top. Don’t forget to add matching values in background-repeat, background-size, and background-position.

Using the Shorthand `background` Property

You can also write everything in one line using the shorthand background property. This is more advanced, but it’s good to see.

Here’s the same idea as Example 3, written as shorthand:

.box {
  background:
    url('pattern.png') repeat center / auto,
    linear-gradient(135deg, rgba(255, 0, 150, 0.7), rgba(0, 120, 255, 0.7)) no-repeat center / cover,
    #222222;
}

Each layer is separated by a comma, and within a layer:

url('pattern.png') = image
repeat = repeat setting
center = position
/ auto = size

If this feels confusing, that’s normal. You can stick with the separate properties (background-image, background-size, etc.) until you feel more comfortable.

Quick Recap

You’ve just learned how to:

Apply multiple backgrounds to a single element using commas.
Control layer order (first is top, last is bottom).
Use background-repeat, background-size, and background-position for each layer.
Mix images, gradients, and colors to create complex designs.

Learning CSS can feel like a lot at first, but you’ve already built layered backgrounds that many real websites use. That’s a big win.

What’s next?

Try adding multiple backgrounds to buttons, headers, or full-page sections.
Explore more gradient types like radial-gradient().
Experiment with transparency to create subtle overlays.

Most importantly, keep playing. The more you tweak and test your code, the faster it will all start to make sense.

Mudzinga