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.
- repeat-x: This property is used to repeat the background image horizontally.
- repeat-y: This property is used to set the background image repeated only vertically.
- no-repeat: This property does not repeat the background image. It displays the background image only once.
Example: In this example, we are using the background-repeat: repeat; property.
HTML
<!DOCTYPE html> < html > < head > < title >background-repeat property</ title > < style > body { background-image: url( "https://media.w3wiki.net/wp-content/uploads/Beginner-25.png"); background-repeat: repeat; background-size: 200px 150px; text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >background-repeat: repeat;</ h2 > </ body > </ html > |
Output:
Example: In this example, we are using the background-repeat: repeat-x; property.
HTML
<!DOCTYPE html> < html > < head > < title >background-repeat property</ title > < style > body { background-image: url( "https://media.w3wiki.net/wp-content/uploads/Beginner-25.png"); background-repeat: repeat-x; background-size: 200px 150px; text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >background-repeat: repeat-x;</ h2 > </ body > </ html > |
Output:
Example: In this example, we are using the background-repeat: repeat-y; property.
HTML
<!DOCTYPE html> < html > < head > < title >background-repeat property</ title > < style > body { background-image: url( "https://media.w3wiki.net/wp-content/uploads/Beginner-25.png"); background-repeat: repeat-y; background-size: 200px 150px; text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >background-repeat: repeat-y;</ h2 > </ body > </ html > |
Output:
Example: In this example, we are using the background-image: no-repeat; property.
HTML
<!DOCTYPE html> < html > < head > < title >background-repeat property</ title > < style > body { background-image: url( "https://media.w3wiki.net/wp-content/uploads/Beginner-25.png"); background-repeat: no-repeat; background-size: 400px 250px; text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ 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
- Firefox 1.0 and above
- Opera 3.5 and above
- Apple Safari 1.0 and above
Contact Us