Skip to content
Related Articles

Related Articles

How to repeat background image vertically and horizontally using CSS ?
  • Last Updated : 31 Mar, 2021

In this article, we are going to discuss the background image repeat property of CSS. Also, we are going to discuss how to repeat the background image in horizontal and vertical directions.

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.

Background-repeat: This property is used to repeat the background image both horizontally and vertically. The last image will be clipped if it is not fit in the browser window.

Syntax

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

Example 1: Let’s repeat the image horizontally. Here we are going to use the same property which we used previously.



The repeat-x This property is used to repeat the background image horizontally.

Syntax:

element {
   background-repeat: repeat-x;
}

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        body{
            background-image: url(
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
      
</body>
</html>

Output: As you can see in the output the image is repeating horizontally now.

Example 2: Now let’s repeat the image vertically. The repeat-y property is used to set the background image repeated only vertically.

Syntax:

element {
   background-repeat: repeat-y;
}

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        body{
            background-image: url("
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
      
</body>
</html>


Output:Now the image is repeating vertically.
My Personal Notes arrow_drop_up
Recommended Articles
Page :