Home > Article > Web Front-end > How to use css to prevent background images from repeating
How to use css to prevent background images from repeating
- 青灯夜游Original
- 2021-04-29 16:10:0813744browse
The background-repeat attribute can be used in css to prevent the background image from repeating. Just add the "background-repeat:no-repeat;" style to the element; this attribute can set whether the background image is repeated and how Repeat, set not to repeat when the value is "no-repeat".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In CSS, we can use the background attribute to set the background image, such as the following code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
background: url("img/1.jpg");
}
</style>
</head>
<body>
</body>
</html>When we run the code, we find that the background image is repeated whether horizontally or vertically until it is paved. fill the entire display area.
#So how to make the background image not repeat? You can use the background-repeat attribute.
The background-repeat attribute can set whether and how the image background image is repeated. Its default value is to repeat both horizontally and vertically.
It has four values that can be set, as follows
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.
It can be seen that when the value of this attribute is "no-repeat", the background image can not be repeated
css background image is not repeated
body{
background: url("img/1.jpg");
background-repeat:no-repeat;
}The running result is as shown below. The background image will not be repeated horizontally or vertically. Only one
will be displayed (learning video sharing: css video tutorial)
The above is the detailed content of How to use css to prevent background images from repeating. For more information, please follow other related articles on the PHP Chinese website!