CSS background-repeat Property
In CSS, The background-repeat property allows you to repeat the background image vertically and horizontally both on the web page. The background-repeat property can decide whether the background image will repeat horizontally, vertically, or not repeat.
Syntax:
background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;
Property Values:
The CSS background-repeat have many property for set image repeat position.
- background-repeat: repeat - The CSS repeat property is used for repeat background image vertically and horizontally in container.
- background-repeat: repeat-x - The CSS repeat-x property is used for repeat background image only horizontally in container.
- background-repeat: repeat-y - The CSS repeat-y property is used for repeat background image only vertically in container.
- background-repeat: no-repeat - The CSS no-repeat property does not repeat background image. The image will show in container once.
Examples:
In this example, The CSS background-repeat: repeat
property repeat background image vertically and horizontally both.
<!DOCTYPE html> <html> <head> <title>background-repeat property</title> <style> body { background-image: url("https://www.webrecto.com/css/images/webrecto.jpg"); background-repeat: repeat; background-size: 200px 140px; text-align: center; } </style> </head> <body> <h2>background-repeat: repeat;</h2> </body> </html>
In this example, The CSS background-repeat: repeat-x
property repeat background image horizontally in container.
<!DOCTYPE html> <html> <head> <title>background-repeat property</title> <style> body { background-image: url("https://www.webrecto.com/css/images/webrecto.jpg"); background-repeat: repeat-x; background-size: 200px 140px; text-align: center; } </style> </head> <body> <h2>background-repeat: repeat-x;</h2> </body> </html>
In this example, The CSS background-repeat: repeat-y
property repeat background image vertically in container.
<!DOCTYPE html> <html> <head> <title>background-repeat property</title> <style> body { background-image: url("https://www.webrecto.com/css/images/webrecto.jpg"); background-repeat: repeat-y; background-size: 200px 140px; text-align: center; } </style> </head> <body> <h2>background-repeat: repeat-y;</h2> </body> </html>
In this example, The CSS background-repeat: no-repeat
property does not repeat background image in container. It will display only once.
<!DOCTYPE html> <html> <head> <title>background-repeat property</title> <style> body { background-image: url("https://www.webrecto.com/css/images/webrecto.jpg"); background-repeat: no-repeat; background-size: 200px 140px; text-align: center; } </style> </head> <body> <h2>background-repeat: no-repeat;</h2> </body> </html>