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

This article mainly introduces how to set up tiling mode in css background map, which has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

The background image tiling mode can be set by background-repeat attribute in css. If the value is "repeat", tiling can be repeated vertically and horizontally. If the value is "repeat-x", tiling can be repeated horizontally. If the value is "repeat-y", tiling can be repeated vertically. If the value is "no-repeat", tiling will not be repeated.

Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.

By default, if one background image is not enough to fill the container, it repeats horizontally and vertically to fill the container. However, sometimes it is desirable that the background image appear only once, or repeat only in one direction.

At this time, you can define how the background image repeats through the background-repeat attribute, that is, the tiling method of the background image. The optional values are repeat.| repeat-x | repeat-y | space | round |no-repeat, the default is repeat. The meanings of different values are shown in the following table:

background-repeat attribute values and meanings attribute values meanings repeat defaults, images repeat horizontally and vertically to fill containers repeat-x images repeat horizontally only to fill containers repeat-y images repeat vertically only to fill containers space images align repeat to fill containers align excess space instead of round images align repeat to fill containers align excess space stretch images no repeat, images are displayed only once

By default, the background image's fill area is the padding-box area of the element, and when the background image is tiled, its fill area will be the border-box area of the element.

The background-repeat property requires 2 parameters, and if you supply 2 parameters, the first one is for horizontal orientation and the second one is for vertical orientation. If only 1 parameter is provided, it is used in both horizontal and vertical directions. The exception is repeat-x and repeat-y, because repeat-x corresponds to repeat no-repeat and repeat-y corresponds to no-repeat repeat, i.e. repeat-x and repeat-y are equivalent to providing two parameter values.

To see how the background-repeat property behaves at different values, a class is defined for each value and then applied to a container.

The HTML code is as follows:

---------------Copyright Notice: This article is an original article of CSDN blogger "ixygj197875", following CC 4.0 BY-SA copyright agreement. Please attach the link to the original source and this statement for reprinting. Original link: blog.csdn.net/ixygj197875/article/details/79333143

CSS code is as follows:

div { width: 100px; height: 120px; border: 1px dashed #888; background-image: url(bg.png);}.repeat-x { background-repeat: repeat-x;}.repeat-y { background-repeat: repeat-y;}.repeat { background-repeat: repeat;}.space { background-repeat: space;}.round { background-repeat: round;}.no-repeat { background-repeat: no-repeat;}

In the above code, the width of the container is 100px and the height is 120px, and the width and height of the background image are both 40px. In order to clearly see the range of the background image, a dotted box of 1px is added to the container and a black box of 1px is added to the background image. The results are shown in Figure 4‑27:

background-repeat property rendering

As you can see from the image above, the images are repeated at the original size to fill the container. In the horizontal direction, when the width of the container is not an integer multiple of the width of the background image: if the value is space, the excess space is filled with white space; if the value is round, the background image is scaled; if the value is other, the last image may be incomplete. The vertical direction is the same.

Thank you for reading this article carefully. I hope that Xiaobian's article "How to set the tiling mode in the background image in css" will be helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

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.