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

醉折花枝作酒筹
Release: 2023-01-07 11:42:56
Original
3486 people have browsed it

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.

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

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;
Copy after login

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;
Copy after login

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;
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!