Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.