Basic introduction to css background fixed style background-attachment property-CSS Tutorial-php.cn

Basic introduction to css background fixed style background-attachment property

高洛峰

Release： 2017-03-10 10:21:17

Original

2617 people have browsed it

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>

Copy after login

The preview effect in the browser is as follows:

Basic introduction to css background fixed style background-attachment property

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!