Home > Article > Web Front-end > Basic introduction to css background fixed style background-attachment property
Basic introduction to css background fixed style background-attachment property
- 高洛峰Original
- 2017-03-10 10:21:172508browse
This article mainly brings you a basic introduction to the css background fixed style background-attachment property. Friends in need can refer to
1. Background-attachment property
In CSS, 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 attributes value. 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 detailed content of Basic introduction to css background fixed style background-attachment property. For more information, please follow other related articles on the PHP Chinese website!