How to make the background image not repeat in css-CSS Tutorial-php.cn

How to make the background image not repeat in css

青灯夜游

Release： 2023-01-04 09:37:45

Original

6670 people have browsed it

In CSS, you can use the background-repeat attribute to prevent the background image from repeating. This attribute can set whether and how the background image is repeated; just set "background-repeat:no-repeat;" to the background image. ” style to prevent the background image from repeating.

How to make the background image not repeat in css

The operating environment of this tutorial: Windows 7 system, HTML5&&CSS3 version, Dell G3 computer.

Recommended: css video tutorial

CSS setting background image

In CSS, we You can use the background attribute to set the background image, such as the following code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>演示背景图片</title>
    <style>
    body{
        background: url(&#39;2019062123225How to make the background image not repeat in css&#39;);
    }
    </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 covers the entire display area.

How to make the background image not repeat in css

CSS background-repeat attribute

There is a background-repeat attribute in CSS that can set images Whether and how the background image is repeated. Its default value is to repeat both horizontally and vertically. If the value of this property is not set, then the background image will be repeated horizontally and vertically like the sample code above, and cover the entire object. displayed area.

It has three values that can be set, as follows, among which the repeat value is the default.

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.

css background image only repeats horizontally (horizontally)

CSS code:

body{
    background: url(&#39;2019062123225How to make the background image not repeat in css&#39;);
    background-repeat:repeat-x;
}

Copy after login

The running result is as shown below, background The images are repeated horizontally

How to make the background image not repeat in css

css background image is repeated vertically

CSS code

body{
    background: url(&#39;2019062123225How to make the background image not repeat in css&#39;);
    background-repeat:repeat-y;
}

Copy after login

Run results As shown below, the background images are repeated vertically

How to make the background image not repeat in css

css background images are not repeated

CSS code

body{
    background: url(&#39;2019062123225How to make the background image not repeat in css&#39;);
    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 make the background image not repeat in css

will be displayed. For more programming-related knowledge, please visit: programming teaching! !

The above is the detailed content of How to make the background image not repeat in css. For more information, please follow other related articles on the PHP Chinese website!