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:
##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!
Usage of sqrt function in Java
How to measure internet speed on computer
Solution to the problem that the input is not supported when the computer starts up
html online editor
What does add mean in java?
Error connecting to apple id server
What platform is Fengxiangjia?
What should I do if eDonkey Search cannot connect to the server?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
