How can image repetition of the backup be controlled in CSS ?
Last Updated :
21 Jul, 2022
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...