What are the ways to repeat the background image of a web document?

The ways to repeat the background image of a web document are: 1. No repetition, no-repeat; 2. The background image will repeat in the vertical and horizontal directions, repeat, 3. Repeat horizontally, repeat-x; 4. Vertical and horizontal Repeat, repeat-y.

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

The repeating methods of the background image include "no repeat", "repeat", "horizontal repeat" and "vertical and horizontal repeat".

Syntax

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;

The most commonly used ones may be the above. Let’s take a look at the other two attribute values:

background-repeat: space;
background-repeat: round;

By default, repeated images are clipped into elements. size, but they can be scaled (using round) or evenly distributed (using space).

round: As the allowed space grows in size, the repeated image will stretch (without gaps) until there is enough space to add an image. When the next image is added, all The current image will be compressed to make space.

space: The images will be repeated as much as possible, but will not be cropped. The first and last images will be fixed to the corresponding sides of the element, and the white space will be evenly distributed among the images. The background-position property is ignored unless only one image can be displayed without cropping. The only time cropping will occur is if the image is too large and there is not enough space to display the entire image.

Double value syntax

background-repeat: repeat space;
background-repeat: round space;
background-repeat: no-repeat round;

The writing method is the same as usual, horizontal | vertical.

Recommended learning: css video tutorial

The above is the detailed content of What are the ways to repeat the background image of a web document?. For more information, please follow other related articles on the PHP Chinese website!