Home > Article > Web Front-end > How to use the background-attachment attribute

How to use the background-attachment attribute

青灯夜游Original: 2019-02-18 13:23:155560browse

The background-attachment attribute needs to be used together with the background-image attribute to set whether the background image is fixed or scrolls with the rest of the page.

CSS background-attachment property

Function:background-attachment property Sets whether the background image is fixed or scrolls with the rest of the page.

Basic syntax:

background-attachment：scroll | fixed | loca;

Parameters:

scroll: Default value, the background image will move as the rest of the page scrolls.

fixed: The background image does not move when the rest of the page scrolls.

loca: The background image is fixed relative to the content of the element; when the content of the element scrolls, the background image always moves with the content.

Note: Internet Explorer 8 and earlier browsers do not support multiple background images on a single element.

CSS background-attachment attribute usage example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body 
{
background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>

<body>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
<p>背景图片是固定的，不会随页面的其余部分滚动。</p>
</body>

</html>

Rendering:

How to use the background-attachment attribute

Reference for this article: https://www.html.cn/book/css/properties/background/background-attachment.htm

The above is the detailed content of How to use the background-attachment attribute. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the background-image attributeNext article：How to use the background-image attribute

See more

How to use the background-attachment attribute

Related articles