我有一个网站(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;
}
当前回答
#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}
其他回答
响应网站添加填充到底部图像高度/宽度x 100 = padding-bottom %:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
更复杂的方法:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
尝试调整背景大小eq Firefox Ctrl + M看到神奇的脚本，我认为最好的一个:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
尝试使用background-size，但使用两个参数，一个用于宽度，另一个用于高度
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width
// and the second will be the height.
background-position:center;
只需两行代码，它就能工作。
#content {
background-image: url('../images/bg.png');
background-size: cover;
}
CSS:
background-size: 100%;
这应该能奏效!：）
如果你想让相同的图像根据浏览器窗口的大小缩放:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
不要设置宽度、高度或边距。
编辑: 前一行关于不设置宽度、高度和边距的问题是指OP最初关于窗口大小缩放的问题。在其他用例中，如果需要，您可能需要设置宽度/高度/边距。
