css - 响应式 css 背景图像

Question

我有一个网站 (g-floors.eu)，我想使背景(在 css 中我为内容定义了一个 bg-image)也具有响应性。不幸的是，除了我能想到的一件事之外，我真的不知道如何做到这一点，但这是一个很好的解决方法。创建多个图像，然后使用 css 屏幕大小更改图像，但我想知道是否有更实用的方法来实现这一点。

基本上我想要实现的是图像(带有水印“G”)自动调整大小而不显示更少的图像。当然可以的话

链接:g-floors.eu

我目前的代码(内容部分)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

Answer 1

如果您希望同一图像根据浏览器窗口的大小进行缩放:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

不要设置宽度、高度或边距。

编辑:关于不设置宽度、高度或边距的前一行是指 OP 关于随窗口大小缩放的原始问题。在其他用例中，您可能需要根据需要设置宽度/高度/边距。