我有一个网站(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:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
or
background-size:100%;
其他回答
我使用
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
效果非常好。
这个很简单=)
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
看一下jsFiddle演示
你可以用这个。我已经测试过了，它的工作100%正确:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
您可以在这个屏幕大小模拟器测试您的网站的响应性: http://www.infobyip.com/testwebsiteresolution.php
每次你做改变时，清除你的缓存，我更喜欢使用Firefox来测试它。
如果你想使用来自其他网站/URL的图像，而不是像这样: 背景图片:url(. . /图片/ bg.png); //该结构将使用来自您自己托管服务器的映像。 然后像这样使用: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg);
享受:)
这是我得到的最好的方法。
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
查看w3schools
更多可用选项
background-size: auto|length|cover|contain|initial|inherit;
只需两行代码，它就能工作。
#content {
background-image: url('../images/bg.png');
background-size: cover;
}
