CSS BACKGROUND IMAGE REPEAT

on

In CSS, use background-repeat to control how a background image repeats.

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

Common values

background-repeat: repeat;    /* repeats horizontally and vertically */
background-repeat: no-repeat; /* does not repeat */
background-repeat: repeat-x;  /* repeats horizontally */
background-repeat: repeat-y;  /* repeats vertically */

For example:

.box {
  width: 500px;
  height: 300px;
  background-image: url("pattern.png");
  background-repeat: repeat-x;
}

You can also combine it with positioning and sizing:

.box {
  background: url("image.jpg") no-repeat center / cover;
}

Here, no-repeat means the image appears only once.

MORE DETAILS

Sure. background-repeat controls whether and how a background image repeats inside an HTML element.

1.Basic syntax

selector {
    background-image: url("image.jpg");
    background-repeat: value;
}

The background-repeat property accepts several values.

repeat

This is the default.

.box {
    background-image: url("pattern.png");
    background-repeat: repeat;
}

The image repeats in both horizontal and vertical directions:

+-------------------------+
| 🖼️ 🖼️ 🖼️ 🖼️            |
| 🖼️ 🖼️ 🖼️ 🖼️            |
| 🖼️ 🖼️ 🖼️ 🖼️            |
+-------------------------+

2.no-repeat

The image appears only once.

.box {
    background-image: url("logo.png");
    background-repeat: no-repeat;
}

Result:

+-------------------------+
| 🖼️                     |
|                         |
|                         |
|                         |
+-------------------------+

This is commonly used for logos, icons, banners, and decorative images.

3.repeat-x

The image repeats from left to right.

.box {
    background-image: url("pattern.png");
    background-repeat: repeat-x;
}

Result:

+-------------------------+
| 🖼️ 🖼️ 🖼️ 🖼️ 🖼️       |
|                         |
|                         |
|                         |
+-------------------------+

Use case

Useful for creating a horizontal pattern, such as a navigation bar or horizontal border.

4.repeat-y

The image repeats from top to bottom.

.box {
    background-image: url("pattern.png");
    background-repeat: repeat-y;
}

Result:

+-------------------------+
| 🖼️                     |
| 🖼️                     |
| 🖼️                     |
| 🖼️                     |
+-------------------------+

This can be useful for vertical decorative patterns.

5.space

The image repeats, but CSS adds equal space between the images so that they don't get cut off.

.box {
    background-image: url("pattern.png");
    background-repeat: space;
}

Conceptually:

| 🖼️    🖼️    🖼️    |

Unlike normal repeat, the browser tries to ensure that the repeated images are completely visible.

6.round

With round, the browser adjusts the image size slightly so that a whole number of images fits inside the element.

.box {
    background-image: url("pattern.png");
    background-repeat: round;
}

The browser may slightly resize the background image to fit:

| 🖼️ 🖼️ 🖼️ 🖼️ |

This is useful when you want the pattern to fit neatly without partial images.

7.Different horizontal and vertical values

You can specify two values:

.box {
    background-repeat: repeat no-repeat;
}

The first value controls the horizontal direction.

The second controls the vertical direction.

So:

background-repeat: repeat no-repeat;

means:

  • Horizontal → repeat
  • Vertical → no-repeat

Another example:

background-repeat: no-repeat repeat;

means:

  • Horizontal → no-repeat
  • Vertical → repeat

8.background-position

background-repeat is often used together with background-position.

.box {
    background-image: url("logo.png");
    background-repeat: no-repeat;
    background-position: center;
}

This places the image in the center.

You can also use:

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

9.background-size

You can control the size of the background image:

.box {
    background-image: url("image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

Common values:

cover

The image covers the entire element.

background-size: cover;

contain

The entire image remains visible.

background-size: contain;

Specific size

background-size: 100px 100px;

10.Complete example

<div class="box">
    Hello CSS
</div>
.box {
    width: 500px;
    height: 300px;

    background-image: url("pattern.png");
    background-repeat: repeat-x;
    background-position: top left;
    background-size: 80px 80px;

    border: 2px solid black;
}

Here:

  • background-image → selects the image
  • background-repeat: repeat-x → repeats it horizontally
  • background-position → determines where it starts
  • background-size → determines the size of each repeated image
  • border → makes the element boundary visible

11.Shorthand background

Instead of writing everything separately:

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

You can use:

.box {
    background: url("image.jpg") no-repeat center / cover;
}

This is very common in real-world CSS.

Quick reference

Value Behavior
repeat  Repeat horizontally + vertically
no-repeat Don't repeat
repeat-x Repeat horizontally
repeat-y Repeat vertically
space Repeat with spaces between images
round Resize images to fit evenly

Most commonly used: no-repeat, repeat-x, repeat-y, and repeat.

Comments

Post a Comment