一个div中如何放置两张背景图，分别固定在顶部与底部？

遇到的情景

• 为了适配不同型号的手机，用一张背景图撑满整个手机的屏幕，机型不同，导致图片被压缩或拉伸，为了解决，办法如下： ↓↓↓

一个div中如何放置两张背景图，分布固定在顶部与底部？

.index-content{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: url('../assets/img/index-bg-top.png') no-repeat center top,
              url("../assets/img/index-bg-bottom.png") no-repeat  center bottom;
  background-size: 100% auto;
  height: calc(100vh);// 高度为屏幕的高度
}