How to achieve a background image repeat effect with CSS-CSS Tutorial-php.cn

How to achieve a background image repeat effect with CSS

藏色散人

Release： 2021-04-22 15:54:20

Original

6933 people have browsed it

How to achieve the background image repeating effect with CSS: First create an HTML sample file and enter the basic code; then implement it through the "background-image: url(img/154e.png);background-repeat: repeat;" attribute The background image repeats the effect.

How to achieve a background image repeat effect with CSS

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

Background image repetition effect, I believe everyone has seen it on major websites. A good-looking background image repetition effect can make our web page more beautiful and richer in content. We can achieve this effect through the background-related properties in CSS.

Below we will use a simple code example to introduce you to the effect of CSS repeating background images.

The code example is as follows:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        body{
            background-image: url(img/154e.png);
            background-repeat: repeat;
        }
    </style>

</head>
<body>
</body>
</html>

Copy after login

The single image we use here is as follows:

How to achieve a background image repeat effect with CSS

Then the effect of repeating the background image The final picture is as follows (partial screenshot):

How to achieve a background image repeat effect with CSS

Related attribute introduction:

background-image attributeYes Sets a background image for the element. An element's background occupies the entire size of the element, including padding and borders, but not margins.

background-repeat attributeSet whether and how to repeat the background image.

Note: By default, the background image is placed in the upper left corner of the element and repeats horizontally and vertically.

Recommended reference: "CSS Tutorial"

This article is about the introduction of CSS to achieve the effect of background image repetition. It is also very simple. I hope it will be useful to friends who need it. Helps!

The above is the detailed content of How to achieve a background image repeat effect with CSS. For more information, please follow other related articles on the PHP Chinese website!