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

Basic introduction to css background-attachment property

小云云

Release： 2017-12-19 13:17:45

Original

3055 people have browsed it

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 is fixed. Friends who need it can refer to it. I hope it can help you.

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 is 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>

Copy after login

The preview effect in the browser is as follows:

Analysis:

Everyone in the browser Drag the scroll bar on the right and 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.

Related recommendations:

Use and definition of css background-attachment attribute

##background-attachment PHP source code array statistics count analysis

Is Google Chrome compatible with background-attachment:fixed;? How to achieve the fixed effect of Firefox background image_html/css_WEB-ITnose

The above is the detailed content of Basic introduction to css background-attachment property. For more information, please follow other related articles on the PHP Chinese website!