分享三种：

第一种

background: url("图片路径位置") no-repeat;
background-size: 100% 100%;
background-attachment: fixed;

关于背景图片属性： background-size:

• cover:扩大到铺满全屏
• contain：把图片扩大到整个屏幕（但是不影响宽高比），直至完全适应内容区域
• 百分比
• 长度

background-repeat:

• no-repeat:背景图片仅显示一次
• repeat-x:背景图片将在水平方向重复
• repeat-y:北京图片将在垂直方向重复
• repeat:默认。将在水平和垂直方向重复

background-attachment

• fixed:当页面的其余部分滚动时，背景图片不会移动
• scroll：默认。背景图片随着页面滚动而滚动
• inherit

background-position背景图片起始位置

• （top left）或者center
• 百分比
• 像素px

background-clip属性规定背景的绘制区域 注意：利用这个属性可以设定背景颜色或图片的覆盖范围

#

• content-box:背景被剪裁到内容框
• border-box:背景被剪裁到边框框
• padding-box：背景被剪裁到内边距框

第二种

background: url("图片地址") no-repeat;
background-size: cover;
height: 100%;
width: 100%;
overflow: hidden;

第三种

给body标签指定背景图，这样背景图就可以填充整个浏览器viewport。其实该方案对所有块级作用容器都可以生效。块级容器的宽高都是动态的，那么背景图就可以自动延伸，充满整个容器

background: url("图片地址") no-repeat;
// 背景图片水平垂直居中
background-size: center center;
background-attachment:fixed;
background-size: cover;