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;
Property Values
Syntax:
element { background-repeat: repeat; }
Example:
<!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:
Syntax:
element { background-repeat: repeat-x; }
Example:
<!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:
Syntax:
element { background-repeat: repeat-y; }
Example:
<!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:
Syntax:
element { background-image: no-repeat; }
Example:
<!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 browser supported by background-repeat property are listed below:
- Apple Safari 1.0
- Google Chrome 1.0
- Firefox 1.0
- Opera 3.5
- Internet Explorer 4.0
leave a comment
0 Comments