我有一个网站(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;
}

当前回答

试试这个:

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

其他回答

如果你想让相同的图像根据浏览器窗口的大小缩放:

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

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

编辑: 前一行关于不设置宽度、高度和边距的问题是指OP最初关于窗口大小缩放的问题。在其他用例中,如果需要,您可能需要设置宽度/高度/边距。

background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

or

background-size:100%;

这是我得到的最好的方法。

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

查看w3schools

更多可用选项

background-size: auto|length|cover|contain|initial|inherit;

我认为,最好的办法是:

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

这样就不需要再做什么了,而且很简单。

至少,它对我有用。

我希望这能有所帮助。

这里是sass mixin响应背景图像,我使用。它适用于任何块元素。当然,同样可以在纯CSS中工作,你只需要手动计算填充。

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

比如http://jsfiddle.net/XbEdW/1/