Home >Web Front-end >CSS Tutorial >How to implement a fixed background image in css

How to implement a fixed background image in css

藏色散人Original: 2018-12-01 15:18:5710122browse

The so-called fixed background image means that when we enter any content on the page or move the mouse, the background image will not change. It is also very simple to implement background image fixation in css. We can use the background-related attributes in css to achieve this.

Recommended reference: "CSS Tutorial"

Then we have introduced it to you in the previous articleHow to achieve background image repetition effect with CSS.

Next we will continue to introduce to you the implementation method of css background image fixation.

The code is as follows:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        body {
            background-image: url("/test/img/154e.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>

</head>
<body>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
</body>
</html>

The effect is as follows:

How to implement a fixed background image in css

##background related properties:

background-attachment propertySet whether the background image is fixed or scrolls with the rest of the page. A value of fixed means that the background image will not move when the rest of the page is scrolled.

background-repeat attributeSet whether and how to repeat the background image.

This article is an introduction to the method of achieving background image fixation with css. It is simple and easy to understand. I hope it will be helpful to friends in need!

The above is the detailed content of How to implement a fixed background image 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：How to implement automatic nesting numbering with css counterNext article：How to implement automatic nesting numbering with css counter

See more

How to implement a fixed background image in css

Related articles