Home > Article > Web Front-end > How to make the background image not repeat in css

How to make the background image not repeat in css

青灯夜游Original: 2020-12-23 11:28:586591browse

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.

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>

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

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

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Why can’t the imported css images be loaded?Next article：Why can’t the imported css images be loaded?

See more

How to make the background image not repeat in css

Related articles