html背景置顶 css设置背景图片位置固定

先看下实例html>

css背景图片固定

body{

background-image:url("https://picsum.photos/id/100/1080/1400");

background-repeat:no-repeat;

background-attachment:fixed;

background-position:center0%;

}

h3{line-height:500px;text-align:center}

背景图片固定,页面滚动不影响

查看效果

有时项目中会遇到背景图固定，页面内容可以滚动，背景不随页面滚动而滚动。就像QQ空间、微博设置自定义背景图的固定选项。

其实很容易实现，利用 background-attachment:fixed; 就能实现，代码如下：body{

background:url("bg.png");

background-repeat:no-repeat;

background-attachment:fixed;

}