Background repeat in CSS is used to set how a background image is repeated on a web page. For this, use the background-repeat property. Following can be the property values −
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Example
Let us now see an example −
<!DOCTYPE html> <html> <head> <style> body { background-image: url("https://www.tutorialspoint.com/images/Swift.png"); background-repeat: repeat-x; background-color: blue; color: white; } .demo { text-decoration: overline underline; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>
Output
Example
Let us now see another example −
<!DOCTYPE html> <html> <head> <style> body { background-image: url("https://www.tutorialspoint.com/images/Swift.png"); background-repeat: repeat-y; background-color: orange; color: white; } .demo { text-decoration: overline underline; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>