你需要知道的网页全屏背景小知识

网页全屏背景图

当我们使用background-image添加背景图片时，会默认的把图片在水平和垂直方向上铺满整个元素，但作为网页背景只需要一张图作为背景图时，就只会希望图片只出现一次，铺满整个页面，具体步骤如下：

第一步：加入背景图片

第一步先使用background-image属性设置url添加一张背景图，初始效果如下，是铺满整个屏幕的：

// 插入一张背景图片
background-image: url("images/bj_2.jpg");

第二步：设置背景平铺方式

第二步使用background-repeat 属性，设置no-repeat属性值让图片不重铺，

background-image: url("images/bj_2.jpg");
// 这是图片不重铺
background-repeat: no-repeat;

background-repeat 属性值如下：

属性值	内容
repeat	背景图像将向垂直和水平方向重复，这是默认
repeat-x	只会在水平方向重复背景图片
repeat-y	只会在垂直方向重复背景图片
no-repeat	图片不会重复，只会出现一次
inherit	继承父元素的值

第三步：设置图片大小

第三步使用background-size属性设置背景图片大小，把宽和高长度都设置为100%，

background-image: url("images/bj_2.jpg");
background-repeat: no-repeat;
//设置图片大小
background-size: 100%,100%;

background-size属性值如下：

属性值	内容
length	设置背景图片高度和宽度，第一个值为宽度，第二个值为高度，如果只给出一个值，第二个值为auto(自动)
percentage	以父元素的百分比设置背景图像的宽度和高度，第一个值为宽度，第二个值为高度，如果只给出一个值，第二个值为auto(自动)
cover	把背景图片缩放至足够大，使其背景图像完全覆盖背景区域，某些部分也许无法显示在背景定位区域中
contain	把图像缩放至最大尺寸，使其宽度和高度完全适应内容区域

第四步：设置背景图随页面不滚动

定义背景图像之后，默认情况下，当窗体的内容滚动时，窗体的背景图像会跟着一起移动，这时就需要background-attachment属性，可以控制背景图像是否跟着元素的内容一起移动

background-image: url("images/bj_2.jpg");
background-repeat: no-repeat;
background-size: 100%,100%;
//设置图片相对于窗口固定
background-attachment: fixed;

background-attachment属性值如下：

属性值	内容
fixed	背景图像相对于窗体固定。任凭页面内容滚动，背景图像始终静止不动
scroll	背景图像相对于元素固定。当窗体的内容滚动时，窗体的背景图像会跟着移动；当一般元素的内容滚动时，背景图像不会跟着移动，因为背景图像总是要跟着元素本身，但会随元素的祖先元素或窗体一起移动
loca	背景图像相对于元素的内容固定。当元素的内容滚动时，背景图像总是要跟着内容一起移动

补充

如果不使用background-attachment：fixed；当页面上下滚动时，图片总是会跟着页面一起滚动，

---

当然，网页背景填充的方式不止这一种，如果有更好的方式，小伙伴们可以在下面评论留言哦。