Home >Web Front-end >CSS Tutorial >How to achieve a background image repeat effect with CSS
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:
Then the effect of repeating the background image The final picture is as follows (partial screenshot):
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!