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

其他回答

通过这段代码,你的背景图像到中心,并固定它的大小,无论你的div大小改变,适合小,大,正常大小,最好的,我用它在我的项目中,我的背景大小或div大小可以改变

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

这个很简单=)

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

看一下jsFiddle演示

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

位置属性可用于根据您的需要对齐顶部底部和中心,背景大小可用于中心裁剪(覆盖)或完整图像(包含或100%)

尝试使用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;

试试这个:

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