28

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

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

这是我的图片的链接：

    ../IMAGES/background.jpg

编辑

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

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

14 回答 14

75

你可以用这个插件http://dev.andreaseberhard.de/jquery/superbgimage/

或者

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

   background-repeat:no-repeat;

   background-size:cover;

不需要浏览器的前缀。两个浏览器都已准备就绪

于 2013-11-12T09:25:30.347 回答
25

试试这个 ，

 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;

有关更多信息，请按照此完美的整页背景图片！

于 2013-11-12T09:18:56.307 回答
18

你可以试试

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

为我工作:)

于 2016-06-20T09:52:54.687 回答
5

试试这个，我希望它会有所帮助：

position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
于 2018-12-05T18:54:40.760 回答
2

试试这个：

background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
于 2013-11-12T09:52:13.607 回答
2

.. 我发现上述解决方案对我不起作用（至少在当前版本的 firefox 和 safari 上）。

在我的情况下，我实际上是在尝试使用 img 标签而不是背景图像来做到这一点，尽管如果你使用 z-height，它也应该适用于背景图像：

<img  src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >

这会将图像缩放为“全屏”（可能会破坏纵横比），这是我想要做的，但很难找到。

它也可能适用于背景图像，尽管在封面/包含对我不起作用之后我放弃了尝试这种解决方案。

我发现包含行为似​​乎与我在任何地方都可以找到的文档不匹配 - 我理解文档说包含应该使最大尺寸包含在屏幕中（保持的方面）。我发现包含总是使我的图像很小（原始图像很大）。

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

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

于 2014-10-29T00:08:41.717 回答
2

这对我有用：

body {
  background-image:url(../IMAGES/background.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
于 2020-07-05T04:00:07.913 回答
2 
body{
    background-image: url(".../img/background.jpg");
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
}
于 2021-03-24T08:58:59.320 回答
0

试试这个，

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

这个对我有用

于 2017-06-30T08:52:52.690 回答
0

背景图像修复到具有浏览器兼容性 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;
}
于 2018-07-27T12:58:58.427 回答
0

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

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

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

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

于 2018-09-05T14:51:52.437 回答
0 
width: 100%;
background-image: url("images/bluedraw.jpg");   
background-size: cover;
于 2020-06-27T05:43:10.763 回答
-1

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

background-repeat: no-repeat;

background-size: cover;
于 2016-05-17T18:14:09.983 回答
-1 
background: url("../image/b21.jpg") no-repeat center center fixed;

background-size: 100% 100%;

height: 100%;

position: absolute; 

width: 100%;
于 2016-07-28T10:19:50.153 回答