CSS | background-repeat Property - GeeksforGeeks

02 Nov, 2021
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;
Default Value : Its default value is initial. 
Property Valuesrepeat: 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("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");                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("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");                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("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");                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("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");                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
Internet Explorer 4.0
Firefox 1.0
Opera 3.5
Apple Safari 1.0
 
hritikbhatnagar2182
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?