Html 使网站背景图片适合屏幕大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19925075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fit website background image to screen size
提问by Tim
I'm just starting on a website and I already encounter a small problem where I can't find a specific solution to.
我刚刚开始使用一个网站，我已经遇到了一个小问题，我找不到具体的解决方案。
I wanted to make my website background fit any screen size in width, height does not matter.
我想让我的网站背景适合任何屏幕尺寸的宽度，高度无关紧要。
This is the link to my image:
这是我的图片链接：
../IMAGES/background.jpg
EDIT
编辑
I have no idea what's wrong, but for some reason the body doesn't even want to get the background image. It just displays a plain white background.
我不知道出了什么问题，但出于某种原因，身体甚至不想获取背景图像。它只显示纯白色背景。
body
{background-image:url(../IMAGES/background.jpg);}
回答by Victorino
you can do this with this plugin http://dev.andreaseberhard.de/jquery/superbgimage/
你可以用这个插件http://dev.andreaseberhard.de/jquery/superbgimage/
or
或者
background-image:url(../IMAGES/background.jpg);
background-repeat:no-repeat;
background-size:cover;
with no need the prefixes of browsers. it's all ready suporterd in both of browers
不需要浏览器的前缀。两个浏览器都已准备就绪
回答by zey
Try this ,
尝试这个 ，
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;
For more information , follow this Perfect Full Page Background Image!!
有关更多信息，请关注这个完美的整页背景图片！
回答by Carlos Jaraiz
You can try with
你可以试试
.appBackground {
position: relative;
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
background-size:100% 100vh;
}
works for me :)
对我有用:)
回答by Sara Popa
Try this, I hope it will help:
试试这个，我希望它会有所帮助：
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
回答by Rohit
Try this:
尝试这个：
background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
回答by pacifist
.. I found the above solutions didn't work for me (on current versions of firefox and safari at least).
.. 我发现上述解决方案对我不起作用（至少在当前版本的 Firefox 和 safari 上）。
In my case I'm actually trying to do it with an img tag, not background-image, though it should also work for background-image if you use z-height:
就我而言，我实际上是在尝试使用 img 标签而不是背景图像来完成它，但如果您使用 z-height，它也应该适用于背景图像：
<img src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >
This scales the image to be 'fullscreen' (probably breaking the aspect ratio) which was what I wanted to do but had a hard-time finding.
这将图像缩放为“全屏”（可能会破坏纵横比），这是我想做的，但很难找到。
It may also work for background-image though I gave up on trying that kind of solution after cover/contain didn't work for me.
它也可能适用于背景图像，尽管在封面/包含对我不起作用后我放弃了尝试这种解决方案。
I found contain behaviour didn't seem to match the documentation I could find anywhere - I understood the documentation to say contain should make the largest dimension get contained within the screen (maintained aspect). I found contain always made my image tiny (original image was large).
我发现包含行为似乎与我可以在任何地方找到的文档不匹配 - 我理解文档说包含应该使最大尺寸包含在屏幕内（维护方面）。我发现包含总是使我的图像很小（原始图像很大）。
Contain was with some hacks closer to what I wanted than cover, which seems to be that the aspect is maintained but image is scaled to make the smallest-dimension match the screen - i.e. always make the image as big as it can until one of the dimensions would go offscreen...
包含与一些更接近我想要的而不是覆盖的黑客，这似乎是保持了方面，但图像被缩放以使最小尺寸与屏幕匹配 - 即始终使图像尽可能大，直到其中之一尺寸会离开屏幕......
I tried a bunch of different things, starting over included, but found height was essentially always ignored and would overflow. (I've been trying to scale a non-widescreen image to be fullscreen on both, broken-aspect is ok for me). Basically, the above is what worked for me, hope it helps someone.
我尝试了很多不同的东西，包括重新开始，但发现高度基本上总是被忽略并且会溢出。（我一直在尝试将非宽屏图像缩放为全屏，损坏的方面对我来说没问题）。基本上，以上是对我有用的，希望它可以帮助某人。
回答by Udara
Try this,
尝试这个，
.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 ;
}
This one works for me
这个对我有用
回答by Super Model
Background image fix to screens with browser compatibility css
背景图像修复到具有浏览器兼容性 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;
}
回答by Stanleynd
Although there are answers to this your questions but because I was once a victim of this problem and after few search online i was unable to solve it but my fellow hub mate helped me and i feel i should share. Examples explained below.
虽然你的问题有答案，但因为我曾经是这个问题的受害者，在网上搜索几次后我无法解决它，但我的枢纽伙伴帮助了我，我觉得我应该分享。下面举例说明。
Folders: web-projects/project1/imgs-journey.png
文件夹： web-projects/project1/imgs-journey.png
background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;
My major points is the dots there if you noticed my journey.png is located inside an imgs folder of another folder so you're to add the dot according to the numbers folders where your image is stored. In my case my journey.png image is saved in two folders that's why two dot is used, so i think this may be the problem of background images not showing sometimes in our codes. Thanks.
如果您注意到我的 travel.png 位于另一个文件夹的 imgs 文件夹内，我的主要观点是那里的点，因此您要根据存储图像的数字文件夹添加点。在我的情况下，我的 travel.png 图像保存在两个文件夹中，这就是使用两个点的原因，所以我认为这可能是我们的代码中有时不显示背景图像的问题。谢谢。
回答by Yasser Agz
You can do it like what I did with my website:
你可以像我在我的网站上所做的那样：
background-repeat: no-repeat;
background-size: cover;
