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;

有关详细信息，请按照此Perfect Full Page Background Image !!

进行操作

Answer 3

您可以尝试使用

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

适合我：）

Answer 4

试试这个：

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

Answer 5

..我发现以上解决方案对我没有用（至少在当前版本的firefox和safari上）。

在我的情况下，我实际上是尝试使用img标签，而不是背景图像，但如果使用z-height，它也适用于背景图像：

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

这会将图片缩放为全屏＆＃39; （可能会打破宽高比）这是我想做的事情，但却很难找到。

它可能也适用于背景图像，虽然我放弃了在覆盖/包含后尝试这种解决方案并不适合我。

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

包含的是一些hack更接近我想要的而不是封面，这似乎是维护了方面但是缩放了图像以使最小尺寸与屏幕匹配 - 即总是使图像尽可能大，直到其中一个尺寸会偏离屏幕......

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

Answer 6

尝试一下，希望对您有所帮助

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

Answer 7

这对我有用：

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

Answer 8

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

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;

我的主要观点是如果您发现我的盘问所在的圆点。png位于另一个文件夹的imgs文件夹中，因此您将根据存储图像的数字文件夹添加该点。就我而言，我的travel.png图像保存在两个文件夹中，这就是为什么要使用两个点的原因，所以我认为这可能是背景图像有时未在我们的代码中显示的问题。谢谢。

Answer 12

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

Answer 13

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

background-repeat: no-repeat;

background-size: cover;

Answer 14

 @media print
   {
      /* your css goes here */
   }

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

14 个答案: