html+css 背景图片铺满并居中

html代码

<div class="main-page">
</div>

scss代码

从代码中我们可以看到，在background设置了 top 和 center，表示该背景的top：0 px，并且处于左右的居中位置，左右屏幕自适应，overflow：hidden；即为超过该背景则把内容隐藏

.main-page{
  background: url('背景图片路径')no-repeat top center;
  position: relative;
  height:需要的高度px;
  overflow: hidden;
}