How can image repetition of the backup be controlled in CSS ?
In this article, we will see how an image repetition of the backup is controlled in CSS. This task can be achieved by using the background-repeat property that will help us to control the repetition of the image.
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;
Example 1: In the example, we will make use of the repeat-x to repeat the image in the horizontal direction.
HTML
<!DOCTYPE html><html><head> <title>background-repeat property</title> <style> body { margin-top: 40px; background-image: url( background-repeat: repeat-x; background-size: 150px 100px; } h1 { text-align: center } </style></head><body> <h1>GeeksforGeeks</h1></body></html> |
Output:
Example 2: In the example, we will make use of the repeat-y to repeat the image in the vertical direction.
HTML
<!DOCTYPE html><html><head> <title>background-repeat property</title> <style> body { margin-top: 40px; background-image: url( background-repeat: repeat-y; background-size: 150px 100px; } h1 { margin-top: 210px; vertical-align: middle; } </style></head><body> <h1>GeeksforGeeks</h1></body></html> |
Output:
Please Login to comment...