CSS | background-repeat Property
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
.png)
