vue-cli脚手架实现全屏背景图

今天在vue-cli脚手架项目中，遇到实现在某个路由中全屏背景图片。
（1）第一次的代码是这样的，问题：图片还是不能实现全屏展示。

.login {
  width: 100%;
  height: 100%;
  background-image: url(../../public/images/login_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

（2）使用position：fixed脱离文档流解决了全屏背景图，出现问题：当屏幕上下缩放时，时没有滚动条的，相当于overflow:hidden，缺少滚动条。

.login {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url(../../public/images/login_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

（3）即能全屏展示背景图，屏幕缩放又有滚动条。完整代码

.login {
  top: 0;
  bottom: 0;
  position: fixed;
  overflow-y:scroll; 
  overflow-x:hidden;
  width: 100%;
  height: 100%;
  background-image: url(../../public/images/login_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}