Home > Article > Web Front-end > How to achieve a background image repeat effect with CSS

How to achieve a background image repeat effect with CSS

藏色散人Original: 2018-11-30 17:36:126898browse

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.

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>

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!

html5 css css3 html 外边距内边距 background

Statement：

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

Previous article：How to achieve center alignment of elements in a flexible box with CSSNext article：How to achieve center alignment of elements in a flexible box with CSS

See more

How to achieve a background image repeat effect with CSS

Related articles