CSS background-repeat is used to set whether the background image is displayed repeatedly and the direction of the repeated display. It is usually used with background-image . If the web page background image is designed with simple color blocks, use background-repeat to automatically arrange small images Filling the entire web page background is a very common way to save bandwidth. When the background image is a large image with a display range, and you don’t want the visual gap caused by connecting the image to the image, you can also use background-repeat to limit the image to display only once.
CSS background-repeat basic syntax
background-repeat: direction and repeat parameters;
The direction and repetition parameters in the grammar are used to control whether the background image should be repeated and in which direction. The default value is to display continuously in the horizontal and vertical directions. The basic orientation of web page design. The horizontal direction is the X axis and the vertical direction. For the Y axis, we can set the display mode of the background image through several different parameters.
CSS background-repeat direction and repeat parameters
| Parameter value | definition |
| repeat | The default repeat mode, the background image is displayed repeatedly on the x-axis and y-axis. |
| repeat-x | The background image is repeated along the x-axis. |
| repeat-y | The background image is repeated along the y axis. |
| no-repeat | The background image does not appear repeatedly, that is, it appears only once. |
In fact, there is another inherit attribute that means inheriting the parent layer attribute, but IE browser does not support it. I don’t know if it will be supported in the future, so it is better not to use inherit, because there are still quite a few people in Taiwan who only use IE browser , If you use the inherit design method, there may be quite a lot of people who open the webpage and cause typographical errors or wrong picture presentation.
CSS background-repeat example, DIV block background image limit repetition
<div style="background-image:url('background image'); background-repeat: no-repeat ;width:400px;height:60px;"></div>
The above example presents the result as
This example designs a background image for a DIV block. The background image can only be displayed once through background-repeat. It is written as "background-repeat:no-repeat;". In this way, if you want to design the background image of the entire webpage, you can change the style The syntax of is written in the body tag, as shown below.
Control whether the background of the entire webpage is repeated
Control whether the background of the entire webpage is repeated
<body style="background-image:url('background image'); background-repeat: direction and repeat parameters ;">
... web content...
</body>
This is a relatively basic way of writing. You can directly control the presentation of the background image of the entire webpage in the body tag. You also need to use the background-image and background-repeat collocation design to allow the background image to appear continuously in the horizontal and vertical directions. , You do not necessarily need to use background-repeat, because the preset will appear repeatedly.... web content...
</body>
Post a Comment
0 Comments