How to use css to prevent background images from repeating-CSS Tutorial-php.cn

How to use css to prevent background images from repeating

青灯夜游

Release： 2023-01-05 16:12:59

Original

13801 people have browsed it

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".

How to use css to prevent background images from repeating

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>

Copy after login

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.

How to use css to prevent background images from repeating

#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;
}

Copy after login

The running result is as shown below. The background image will not be repeated horizontally or vertically. Only one

How to use css to prevent background images from repeating

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!