我刚开始在一个网站上，我已经遇到了一个小问题，我找不到具体的解决方案。
我想让我的网站背景在宽度上适合任何屏幕尺寸，高度无关紧要。
这是我图片的链接：
../IMAGES/background.jpg
编辑
我不知道出了什么问题，但由于某种原因，身体甚至不想获得背景图像。它只是显示纯白色背景。
body
{background-image:url(../IMAGES/background.jpg);}
【问题讨论】：
标签： html css background size responsive
body{
background-image: url(".../img/background.jpg");
background-size: 100vw 100vh;
background-repeat: no-repeat;
}
【讨论】：
这对我有用：
body {
background-image:url(../IMAGES/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
【讨论】：
width: 100%;
background-image: url("images/bluedraw.jpg");
background-size: cover;
【讨论】：
虽然你的问题有答案，但因为我曾经是这个问题的受害者，经过几次在线搜索后我无法解决它，但我的中心伙伴帮助了我，我觉得我应该分享。 下面举例说明。
文件夹：web-projects/project1/imgs-journey.png
background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;
如果您注意到我的旅程.png 位于另一个文件夹的 imgs 文件夹内，我的主要观点是那里的点，因此您要根据存储图像的数字文件夹添加点。在我的情况下，我的 Journey.png 图像保存在两个文件夹中，这就是使用两个点的原因，所以我认为这可能是背景图像有时不会在我们的代码中显示的问题。谢谢。
【讨论】：
试试这个，希望对你有帮助：
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
【讨论】：
通过浏览器兼容性 css 修复屏幕的背景图像
.full-screen {
height: 100%;
width: 100%;
background-image: url(../images/banner.jpg);
background-size: cover;
background-position: center;
//for browser compatibility
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
【讨论】：
试试这个，
.appBg {
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}
这个适合我
【讨论】：
.. 我发现上述解决方案对我不起作用（至少在当前版本的 firefox 和 safari 上）。
在我的情况下，我实际上是在尝试使用 img 标签而不是 background-image 来做到这一点，尽管如果您使用 z-height，它也应该适用于 background-image：
<img src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >
这会将图像缩放为“全屏”（可能会破坏纵横比），这是我想做但很难找到的。
它也可能适用于背景图像，尽管在封面/包含对我不起作用之后我放弃了尝试这种解决方案。
我发现包含行为似乎与我在任何地方都可以找到的文档不匹配 - 我理解文档中说包含应该使最大尺寸包含在屏幕中（维护方面）。我发现 contains 总是让我的图像很小（原始图像很大）。
包含比封面更接近我想要的一些技巧，这似乎是保持了外观，但图像被缩放以使最小尺寸与屏幕匹配 - 即始终使图像尽可能大，直到其中一个维度会离开屏幕......
我尝试了很多不同的东西，包括从头开始，但发现高度基本上总是被忽略并且会溢出。 （我一直在尝试将非宽屏图像缩放为全屏，破碎方面对我来说是可以的）。基本上，以上对我有用，希望对某人有所帮助。
【讨论】：
background: url("../image/b21.jpg") no-repeat center center fixed;
background-size: 100% 100%;
height: 100%;
position: absolute;
width: 100%;
【讨论】：
你可以试试
.appBackground {
position: relative;
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
background-size:100% 100vh;
}
为我工作:)
【讨论】：
您可以像我对我的网站所做的那样：
background-repeat: no-repeat;
background-size: cover;
【讨论】：
试试这个：
background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
【讨论】：
你可以用这个插件http://dev.andreaseberhard.de/jquery/superbgimage/来做到这一点
或
background-image:url(../IMAGES/background.jpg);
background-repeat:no-repeat;
background-size:cover;
不需要浏览器的前缀。两个浏览器都准备好了
【讨论】：
试试这个，
background: url(../IMAGES/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
更多信息，请关注Perfect Full Page Background Image!!
【讨论】：