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

Question

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

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

这是我图片的链接：

    ../IMAGES/background.jpg

编辑

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

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

Answer 1

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

或

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

   background-repeat:no-repeat;

   background-size:cover;

不需要浏览器的前缀。在两个浏览器中都已准备好支持

Answer 2

试试这个，

 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;

更多信息，关注这个完美的整页背景图片！！

Answer 3

你可以试试

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

对我有用:)

Answer 4

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

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

Answer 5

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

Answer 6

试试这个：

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

Answer 7

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

在我的例子中，我实际上是在尝试使用 img 标签，而不是背景图像，尽管如果您使用 z-height，它也应该适用于背景图像：

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

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

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

我发现包含行为似乎与我在任何地方都能找到的文档不匹配——我理解文档说包含应该使最大维度包含在屏幕内（维护方面）。我发现包含总是使我的图像变小（原始图像很大）。

包含一些更接近我想要的东西而不是封面，这似乎是保持方面但图像被缩放以使最小尺寸与屏幕匹配 - 即总是使图像尽可能大直到之一尺寸会离开屏幕......

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

Answer 8

这对我有用：

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

Answer 9

试试这个，

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

这个适合我

Answer 10

具有浏览器兼容性 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;
}

Answer 11

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

文件夹：

web-projects/project1/imgs-journey.png

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

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

Answer 12

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

Answer 13

类似于上面的一些答案，但我不会设置在身体中，那样不太灵活。如果我是你，我会创建一个容器并设置特定于它的背景属性。这允许图像随页面缩放并使其能够完全占据背景，即使在页面大小与图像比例大不相同的情况下，请参见最底部的图像作为示例。

要创建这样的容器，您可以执行类似以下操作：

在您的 html 页面中：

<div class='background-div'></div>

在你的样式表中：

.background-div {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    background-image: url(../images/background.jpg);
    background-size: cover;
    background-position: center;
}

CSS 块执行以下操作：

将任何定位归零，即设置图像从最左上角开始。
我们将位置设置为
```
fixed
```
，以便从中删除元素正常文件流。
设置图像位置。您应该将其更改为各自的文件夹。
我们将背景设置为
```
cover
```
，这将使图像适合屏幕。
最后，我们将图像居中。

背景样式应用于

<div>

容器

背景样式应用于

<body>

容器

Answer 14

你可以像我在我的网站上做的那样：

background-repeat: no-repeat;

background-size: cover;

Answer 15

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

background-size: 100% 100%;

height: 100%;

position: absolute; 

width: 100%;

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

问题描述投票：0回答：15

15个回答

最新问题

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

问题描述 投票：0回答：15

15个回答

最新问题

问题描述投票：0回答：15