响应式设计-压缩背景图像

Question

我有一张图片作为背景，但是当在较小的屏幕上查看它时，它不会调整大小。我已经附上了它在手机屏幕上的照片以及代码。

如果有人有任何建议，我可以修改它以适应我的屏幕，而不是看起来太疯狂了，那就太好了。谢谢!

#bgsecond {
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%;
    z-index: -100;
    opacity: 0.90;
  }

#bgsecond img {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 200;
    min-height: 100%;
  }

Answer 1

正如@Sean-Stopnik指出的那样，background-size: cover将会做到这一点。background-size: 100% 100%将图像拉伸到其容器的尺寸，而background-size: cover将在填充整个容器时显示尽可能多的图像(不拉伸)。它确实会裁剪图像，但您可以使用background-position来控制图像的裁剪位置。

Answer 2

将以下内容添加到CSS代码中：

background-size: 100% 100%;