Skip to content
Related Articles

Related Articles

CSS | background-repeat Property

View Discussion
Improve Article
Save Article
  • Last Updated : 12 Sep, 2022
View Discussion
Improve Article
Save Article

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|round|space|repeat-y|no-repeat|initial|
inherit;

Default Value: Its default value is initial. 

Property Values:

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: 

element {
    background-repeat: repeat;
}

Example: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>background-repeat property</title>
    <style>
        body {
            background-image: url(
            background-repeat: repeat;
            background-size: 200px 150px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>background-repeat: repeat;</h2>
</body>
 
</html>

Output: 

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

Syntax: 

element {
    background-repeat: repeat-x;
}

Example: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>background-repeat property</title>
    <style>
        body {
            background-image: url(
            background-repeat: repeat-x;
            background-size: 200px 150px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>background-repeat: repeat-x;</h2>
</body>
 
</html>

Output: 

repeat-y: This property is used to set the background image repeated only vertically. 

Syntax: 

element {
    background-repeat: repeat-y;
}

Example: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>background-repeat property</title>
    <style>
        body {
            background-image: url(
            background-repeat: repeat-y;
            background-size: 200px 150px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>background-repeat: repeat-y;</h2>
</body>
 
</html>

Output: 

no-repeat: This property does not repeat background image. It displays the background image only once. 

Syntax: 

element {
    background-image: no-repeat;
}

Example: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>background-repeat property</title>
    <style>
        body {
            background-image: url(
            background-repeat: no-repeat;
            background-size: 400px 250px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>background-repeat: no-repeat;</h2>
</body>
 
</html>

Output: 

Supported Browsers: The browsers supported by background-repeat property are listed below:  

  • Google Chrome 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 4.0 and above
  • Firefox 1.0 and above
  • Opera 3.5 and above
  • Apple Safari 1.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!