使网站背景图像适合屏幕大小

Posted 2023-02-19

【中文标题】使网站背景图像适合屏幕大小

【英文标题】：Fit website background image to screen size

【发布时间】：2013-11-24 08:38:10

【问题描述】：

我刚开始在一个网站上，我已经遇到了一个小问题，我找不到具体的解决方案。

我想让我的网站背景在宽度上适合任何屏幕尺寸，高度无关紧要。

这是我图片的链接：

    ../IMAGES/background.jpg

编辑

我不知道出了什么问题，但由于某种原因，身体甚至不想获得背景图像。它只是显示纯白色背景。

body
background-image:url(../IMAGES/background.jpg);

【问题讨论】：

有很多像你这样的问题。请使用搜索功能！而图片路径就是你的本地路径。

Stretch and scale a CSS image in the background - with CSS only 的可能重复项

【参考方案1】：

body
    background-image: url(".../img/background.jpg");
    background-size: 100vw 100vh;
    background-repeat: no-repeat;

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票。

【参考方案2】：

这对我有用：

body 
  background-image:url(../IMAGES/background.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

【讨论】：

欢迎来到 Stack Overflow。当用一个已接受的答案和十二个现有答案回答一个六年前的问题时，指出你的答案所针对的问题的新方面是非常重要的。仅代码答案通常可以通过解释它们的工作方式和原因来改进。

【参考方案3】：

width: 100%;
background-image: url("images/bluedraw.jpg");   
background-size: cover;

【参考方案4】：

虽然你的问题有答案，但因为我曾经是这个问题的受害者，经过几次在线搜索后我无法解决它，但我的中心伙伴帮助了我，我觉得我应该分享。 下面举例说明。

文件夹：web-projects/project1/imgs-journey.png

background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;

如果您注意到我的旅程.png 位于另一个文件夹的 imgs 文件夹内，我的主要观点是那里的点，因此您要根据存储图像的数字文件夹添加点。在我的情况下，我的 Journey.png 图像保存在两个文件夹中，这就是使用两个点的原因，所以我认为这可能是背景图像有时不会在我们的代码中显示的问题。谢谢。

【参考方案5】：

试试这个，希望对你有帮助：

position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');

【参考方案6】：

通过浏览器兼容性 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;

【参考方案7】：

试试这个，

.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 ;

这个适合我

【参考方案8】：

.. 我发现上述解决方案对我不起作用（至少在当前版本的 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 总是让我的图像很小（原始图像很大）。

包含比封面更接近我想要的一些技巧，这似乎是保持了外观，但图像被缩放以使最小尺寸与屏幕匹配 - 即始终使图像尽可能大，直到其中一个维度会离开屏幕......

我尝试了很多不同的东西，包括从头开始，但发现高度基本上总是被忽略并且会溢出。 （我一直在尝试将非宽屏图像缩放为全屏，破碎方面对我来说是可以的）。基本上，以上对我有用，希望对某人有所帮助。

【参考方案9】：

background: url("../image/b21.jpg") no-repeat center center fixed;

background-size: 100% 100%;

height: 100%;

position: absolute; 

width: 100%;

【参考方案10】：

你可以试试

.appBackground 
    position: relative;
    background-image: url(".../img/background.jpg");
    background-repeat:no-repeat;
    background-size:100% 100vh;

为我工作:)

【讨论】：

这是唯一正确的解决方案。成功的关键是“100vh”。

终于找到了一个不仅仅是“使用背景尺寸：封面”的答案，这是可行的。

【参考方案11】：

您可以像我对我的网站所做的那样：

background-repeat: no-repeat;

background-size: cover;

【参考方案12】：

试试这个：

background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;

【参考方案13】：

你可以用这个插件http://dev.andreaseberhard.de/jquery/superbgimage/来做到这一点

或

   background-image:url(../IMAGES/background.jpg);

   background-repeat:no-repeat;

   background-size:cover;

不需要浏览器的前缀。两个浏览器都准备好了

【参考方案14】：

试试这个，

 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!!

【讨论】：

这是一个有点旧的线程，但它实际上对我来说效果很好，但一定要把这个 CSS 放在 html 而不是 body 中。

这适用于各种设备。保持图像中心发挥神奇作用