使用图片做背景并设置充满固定屏幕

需要使用2个css属性，background-size和background-attachment，只需要如下两个设置即可实现：

body {
  background: url(./login_bg.jpg) no-repeat center center;
  background-size: contain;
  background-attachment: fixed;
}

background-size

指定背景图像的尺寸

可选值

• width，height：设置固定宽高，只写一个值时，第二个默认为auto。example：background-size: 800px 500px;

• widthPercent,heightPercent: 设置宽高占元素宽高的百分比，第二个值默认为auto。example：background-size: 80% 50%;

• cover: 保持图像的纵横比缩放图像至完全覆盖背景定位区域，example：background-size: cover;

  缩放后如果容器的宽高比与图片不一致，图片的一部分可能在屏幕上显示不出，效果如下
  

• conatin：保持图像的纵横缩放图像成将适合背景定位区域

  图片缩放后如果容器宽高比与图片不一致可能会有缝隙，效果如下：
  

background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动

可选值

• scroll：默认值，背景图片随着页面的滚动而滚动,通常长页面情况，容器需要滚动，并且需要背景也跟随移动的交互效果时使用。

  效果如下：
  
  

• fixed： 背景图片不会随着页面的滚动而滚动

  效果如下：
  
  

• local：背景图片会随着元素内容的滚动而滚动，通常容器尺寸固定，但是内容溢出，需要用overflow设置内容滚动时，背景也跟着滚动。
• 设置初始值与继承属性就不过多介绍