How to use the background-repeat attribute in css
This article mainly introduces how to use the background-repeat attribute in css. It is very detailed and has a certain reference value. Friends who are interested must finish it!
CSSbackground-repeat attribute
Function: sets whether and how to repeat the background image.
Basic syntax:
Background-repeat:repeat | repeat-x | repeat-y | no-repeat
Repeat: default value, the background image will be repeated vertically and horizontally.
Repeat-x: only the horizontal position repeats the background image.
Repeat-y: only the vertical position repeats the background image.
No-repeat: sets the background image not to repeat.
Description: the background-repeat property defines the tiling mode of the image. Repeat from the original image, which is defined by background-image and placed according to the value of background-position.
An example of using the CSSbackground-repeat attribute
Rookie course (runoob.com)
.demo1 {
Width:400px
Height:150px
Border:1pxsolidred
Background-image:url ('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
Background-repeat:repeat
}
.demo2 {
Width:400px
Height:100px
Border:1pxsolidred
Background-image:url ('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
Background-repeat:no-repeat
}
.demo3 {
Width:400px
Height:150px
Border:1pxsolidred
Background-image:url ('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
Background-repeat:repeat-x
}
.demo4 {
Width:400px
Height:400px
Border:1pxsolidred
Background-image:url ('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
Background-repeat:repeat-y
}
Repeat sets the background picture to repeat vertically and horizontally
No-repeat sets the background image not to repeat
Repeat-x sets the background picture to repeat horizontally
Repeat-y sets the background picture to repeat vertically
The above is all the content of the article "how to use the background-repeat attribute in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
