Home > Article > Web Front-end > About the use of the background-attachment attribute of css
About the use of the background-attachment attribute of css
- 不言Original
- 2018-06-21 17:48:392111browse
This article mainly introduces to you how to use the background attachment attribute background-attachment in CSS to set whether the background image scrolls with the object or remains fixed. Friends in need can refer to it
1. Background-attachment attribute
In CSS, you can use the background-attachment attribute background-attachment to set whether the background image scrolls with the object or remains fixed.
Syntax:
background-attachment:scroll/fixed;
Description:
The background-attachment attribute has only 2 attribute values. scroll means that the background image scrolls as the object scrolls, which is the default option; fixed means that the background image is fixed on the page, and only other content scrolls with the scroll bar.
Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#p1
{
width:160px;
height:1200px;
border:1px solid gray;
background-image:url("cartoongirl.gif");
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p id="p1"></p>
</body>
</html>
The preview effect in the browser is as follows:
Analysis:
When you drag the scroll bar on the right in the browser, you will find that the background image is fixed on the page.
After setting background-attachment in IE or 360, you cannot set the background-position attribute, otherwise the image will not be displayed in the browser. You can test Google browser and Firefox browser.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Simulate the effect of box-shadow in css3 under IE
About using a background image in css Implementation ideas for making navigation menu
The above is the detailed content of About the use of the background-attachment attribute of css. For more information, please follow other related articles on the PHP Chinese website!