How can image repetition of the backup be controlled in CSS ?

Last Updated : 21 Jul, 2022

In this article, we will see how an image repetition of the backup is controlled in CSS. This task can be achieved by using the background-repeat property that will help us to control the repetition of the image.

The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background image will be repeated or not.

Syntax:

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Example 1: In the example, we will make use of the repeat-x to repeat the image in the horizontal direction.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>background-repeat property</title>
    <style>
        body {
            margin-top: 40px;
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-repeat: repeat-x;
            background-size: 150px 100px;
        }
         
        h1 {
            text-align: center
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
</body>
</html>

Output:

Example 2: In the example, we will make use of the repeat-y to repeat the image in the vertical direction.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>background-repeat property</title>
    <style>
    body {
        margin-top: 40px;
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
        background-repeat: repeat-y;
        background-size: 150px 100px;
    }
     
    h1 {
        margin-top: 210px;
        vertical-align: middle;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
</body>
</html>