响应CSS背景图像

Question

响应CSS背景图像

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

基本上，我想实现的是，图像(与水印‘G’)自动调整大小，而不显示较少的图像。当然，如果有可能的话

链接：G-地板

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

#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关于按窗口大小缩放的最初问题。在其他用例中，如果需要，您可能希望设置宽度/高度/边距。

Answer 2

通过这段代码，您的背景图像将中心并固定它的大小，无论您的div大小更改，对于小的，大的，正常的大小，最好的，我使用它在我的项目中，我的背景大小或div大小可以改变。background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:center;

Answer 3

试试这个：background-image: url(_images/bg.png);background-repeat: no-repeat;background-position: center center;background-attachment: fixed;background-size: cover;