Background Size, Position, and Repeat

When you first add an image as a background in a webpage, it often looks… not quite right. Maybe it repeats in a strange way, appears too big, or is stuck in the corner instead of centered.

In this beginner-friendly guide, you’ll learn how to control background size, background position, and background repeat using CSS. You don’t need any prior coding experience—just curiosity and a text editor.

By the end, you’ll be able to:

Make background images fit nicely inside a box
Move backgrounds around (center, top, bottom, etc.)
Decide if an image should repeat, and how

Let’s start from the very beginning.

Getting Set Up (Super Simple)

All you need is:

A folder on your computer
A file called index.html
A background image (for example, background.jpg)

Put index.html and background.jpg in the same folder.

Then, copy this basic HTML into index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Background Demo</title>
  <style>
    /* We'll add CSS here in the next examples */
    body {
      margin: 0; /* Remove default browser margin */
      font-family: Arial, sans-serif;
    }
    .box {
      width: 100%;
      height: 300px;
      border: 2px solid #333;
      /* Background styles will go here */
    }
  </style>
</head>
<body>
  <h1>CSS Background Demo</h1>
  <div class="box"></div>
</body>
</html>

Open index.html in your browser (double-click it). You should see a title and an empty box.

We’re going to style that .box with backgrounds.

Step 1: Add a Simple Background Image

First, let’s just add an image and see what the browser does by default.

Update the .box CSS inside the <style> tag:

.box {
  width: 100%;
  height: 300px;
  border: 2px solid #333;

  /* Add a background image */
  background-image: url('background.jpg');
}

What this does:

background-image tells the browser which image to use.
url('background.jpg') points to a file in the same folder.

What you’ll see:

The image may repeat (tile) across the box.
It might be cut off or not fully visible if it’s large.

This default behavior is why we need size, position, and repeat.

Step 2: Control Background Size

The background-size property tells the browser how big the background image should be.

Add this to .box:

.box {
  width: 100%;
  height: 300px;
  border: 2px solid #333;

  background-image: url('background.jpg');

  /* Control how big the image is */
  background-size: cover; /* Try changing this value */
}

Common `background-size` values

cover
- The image fills the box completely.
- Some parts of the image may be cropped (cut off).
contain
- The entire image is visible.
- There may be empty space (gaps) around it if the box and image shapes are different.
Specific sizes (like 100px 200px or 50% 50%)
- First value = width
- Second value = height

Try this:

background-size: contain;   /* Show the whole image */

Or:

background-size: 100% 100%; /* Stretch image to fill box exactly */

Note: 100% 100% can distort the image (make it look squished or stretched). Use with care.

Try it yourself

Experiment with these values:

background-size: cover;
background-size: contain;
background-size: 200px 200px;
background-size: 50% auto;  /* 50% width, automatic height */

Notice how the image looks each time. You’re training your eye to see how background-size behaves.

Step 3: Control Background Position

By default, the browser places the background image at the top-left corner of the box.

The background-position property lets you move it.

Add this to .box:

.box {
  width: 100%;
  height: 300px;
  border: 2px solid #333;

  background-image: url('background.jpg');
  background-size: cover;

  /* Move the image inside the box */
  background-position: center; /* Try other values too */
}

Common `background-position` values

You can use keywords:

background-position: left top;
background-position: center center;
background-position: right bottom;

First word = left / center / right (horizontal)
Second word = top / center / bottom (vertical)

If you use only one keyword like center, the browser assumes center center.

You can also use percentages or pixels:

background-position: 50% 50%;  /* Center (same as center center) */
background-position: 0 0;      /* Top-left corner */
background-position: 100% 100%;/* Bottom-right corner */
background-position: 20px 50px;/* 20px from left, 50px from top */

Try it yourself

Change the line:

background-position: center;

to different values and refresh the page each time.

Watch how the visible part of the image changes inside the box, especially when using background-size: cover;.

Step 4: Control Background Repeat

By default, background images repeat (tile) both horizontally and vertically.

The background-repeat property lets you decide if and how the image repeats.

Update your .box CSS:

.box {
  width: 100%;
  height: 300px;
  border: 2px solid #333;

  background-image: url('background.jpg');
  background-size: 200px 200px;   /* Make it smaller so you can see tiling */
  background-position: left top;  /* Start in the top-left */

  /* Control repetition */
  background-repeat: repeat;      /* Try changing this value */
}

Common `background-repeat` values

repeat (default)
- Repeats horizontally and vertically.
no-repeat
- Shows the image only once.
repeat-x
- Repeats left-to-right (horizontally) only.
repeat-y
- Repeats top-to-bottom (vertically) only.

Try this:

background-repeat: no-repeat;

Now you should see only one copy of the image.

Then try:

background-repeat: repeat-x; /* Only horizontal repeating */

and

background-repeat: repeat-y; /* Only vertical repeating */

Try it yourself

Use a smaller image (like an icon or pattern). Set:

background-size: 50px 50px;
background-repeat: repeat;

You’ve just created a tiled pattern background.

Putting It All Together (Example Layout)

Now let’s build a slightly richer example that uses all three: size, position, and repeat.

Replace your .box CSS with this:

.box {
  width: 100%;
  height: 300px;
  border: 2px solid #333;
  color: white;
  display: flex;              /* Center text horizontally */
  align-items: center;        /* Center text vertically */
  justify-content: center;
  text-shadow: 0 1px 2px black;

  /* Background settings */
  background-image: url('background.jpg');
  background-size: cover;     /* Fill the box nicely */
  background-position: center;/* Focus the middle of the image */
  background-repeat: no-repeat;/* Don’t tile the image */
}

And update your HTML box content:

<div class="box">
  <h2>Welcome to My Page</h2>
</div>

What this does:

Centers the text inside the box.
Uses your image as a clean, full-width banner.
Ensures the image doesn’t repeat and looks good on most screens.

You’ve just made a simple hero/header section like you see on many modern websites.

Try It Yourself: Create Two Different Boxes

Now that you know the basics, create two boxes with different background styles.

Add this CSS:

.pattern-box {
  width: 100%;
  height: 150px;
  border: 2px solid #999;

  background-image: url('background.jpg');
  background-size: 80px 80px;  /* Smaller tiles */
  background-repeat: repeat;   /* Create a pattern */
}

.hero-box {
  width: 100%;
  height: 250px;
  border: 2px solid #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url('background.jpg');
  background-size: cover;      /* Large hero image */
  background-position: center; 
  background-repeat: no-repeat;
}

And add this HTML inside <body> below the heading:

<h1>CSS Background Demo</h1>

<div class="pattern-box"></div>
<br />
<div class="hero-box">
  <h2>My Awesome Hero Section</h2>
</div>

Compare the two boxes:

The first uses repeat and smaller size to create a pattern.
The second uses cover, center, and no-repeat for a bold hero banner.

You’ve just used the same image in two very different, effective ways.

Quick Recap & What’s Next

You’ve covered a lot—nice work. Here are the key ideas to remember:

background-size controls how big the image appears.
- cover = fill the box, crop if needed.
- contain = show the whole image, may leave gaps.
- Custom values (like 200px 200px) give exact control.
background-position moves the image inside the box.
- Keywords: left, center, right, top, bottom.
- Values like 50% 50% or 20px 40px give fine control.
background-repeat decides if the image tiles.
- repeat, no-repeat, repeat-x, repeat-y.

If this felt like a lot, that’s okay. Playing with real examples is the best way to learn. Change one property at a time, refresh the page, and watch what happens.

What’s next?

Explore background-attachment (fixed vs scrolling backgrounds).
Learn the background shorthand to write less code.
Try combining gradients with images for more creative designs.

Every time you experiment, you’re building real skills. Keep tweaking, keep testing, and you’ll be creating professional-looking layouts faster than you think.

Mudzinga