css can use the "background-repeat" attribute to set the image not to repeat, the syntax is "background-repeat:no-repeat"; this attribute sets whether and how to repeat the background image, when the value is "no-repeat" , indicating that the background image is only displayed once.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Background-repeat attribute introduction:
The background-repeat attribute defines the tiling mode of the image.
Repeat starting from the original image, which is defined by background-image and placed according to the value of background-position.
Attribute value:
repeat Default. The background image will repeat vertically and horizontally.
repeat-x The background image will repeat horizontally.
repeat-y The background image will repeat vertically.
no-repeat The background image will be displayed only once.
inherit specifies that the setting of the background-repeat attribute should be inherited from the parent element.
Example:
<html>
<head>
<style type="text/css">
body
{
background-image:
url(/i/eg_bg_03.gif);
}
</style>
</head>
<body>
</body>
</html>Rendering:
css set the image not to repeat
<html>
<head>
<style type="text/css">
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>Rendering:
Recommended learning: css video tutorial
The above is the detailed content of How to set images not to repeat in css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
