Home >Web Front-end >Front-end Q&A >How to set css images not to repeat
How to set css images not to repeat
- 藏色散人Original
- 2021-02-24 11:38:133016browse
How to set css image non-repeat: First create an HTML sample file; then introduce a background image; finally, set the attribute to "background-repeat:no-repeat" to achieve non-repeat images.
The operating environment of this article: Windows7 system, HTML5&&CSS3, Dell G3 computer.
css can use the background-repeat attribute to set the image not to repeat. The background-repeat attribute sets whether and how to repeat the background image. By default, the background image repeats horizontally and vertically.
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.
[Recommended: css video tutorial]
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 picture 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>Effect picture:
The above is the detailed content of How to set css images not to repeat. For more information, please follow other related articles on the PHP Chinese website!