Html 背景图片使用 HTML5 适合页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17071297/
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
Background image using HTML5 to fit the page
提问by 0bserver07
I want to make one image the full background of a website! I know it sounds pretty simple, but it just got me crazy, it doesn't fit the page, this the last try I reached with!
我想制作一张图片作为网站的完整背景！我知道这听起来很简单，但它让我发疯了，它不适合页面，这是我最后一次尝试！
CSS :
CSS :
body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
I'm using Twitter Bootstrap as well, but the thing is even without that I can't get it right!
我也在使用 Twitter Bootstrap，但即使没有它，我也无法正确使用！
Any help would be appreciated.
任何帮助，将不胜感激。
EDIT: and I didn't use exact pixels because I'm trying to make a responsive + mobile design.
编辑：我没有使用精确的像素，因为我正在尝试进行响应式 + 移动设计。
I don't know why they downvoted the question! But this is how I solved it!
我不知道他们为什么不赞成这个问题！但这就是我解决的方法！
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mybody {
background: url('images/bodybg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
#myheader {
background: url('images/headerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
回答by Corey Horn
EDIT: I created a DEMOwith some unnecessary things removed. This has the benefit of not windowing your background picture. The DEMOworks but was not as extensively tested as the quoted code below.
编辑：我创建了一个DEMO，删除了一些不必要的东西。这具有不窗口化背景图片的好处。该DEMO工作，但并没有下文引用的代码作为广泛的测试。
I recently worked on a project where we needed this exact thing. I'm posting from my project files, so some of this may be unnecessary as it was a team member that wrote this.
我最近在一个项目中工作，我们需要这个确切的东西。我是从我的项目文件中发布的，所以其中一些可能是不必要的，因为它是一个团队成员写的。
Start by setting properties of html and body. Then, I have a root div inside body called background.
首先设置 html 和 body 的属性。然后，我在 body 中有一个名为 background 的根 div。
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#background {
background: #000000 url(urlHere) no-repeat bottom left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
Again, some of that I'm sure is unnecessary, but I hope it helps.
同样，我确定其中一些是不必要的，但我希望它有所帮助。
回答by WooCaSh
You can do this by adding property background-attachment: fixed;
您可以通过添加属性来做到这一点 background-attachment: fixed;
body {
background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
But you must know that if ratio of page dimension and image dimension are diferent then image can be cutted in window.
但是您必须知道，如果页面尺寸和图像尺寸的比例不同，则可以在窗口中切割图像。
EDIT
编辑
If for you height is more important change parameter backround-sizeto containt:
如果对您来说身高更重要，请将参数更改backround-size为containt：
body {
background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat 50% 50%;
background-attachment: fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
回答by monteirobrena
You need set the height for first element of page.
您需要为页面的第一个元素设置高度。
html, body { margin:0; height: 100%;}
回答by StudenProg
Why not import the img's into Flash (Microsoft Program) and convert the img's into Vector IMG's (Vector: Images who's quality isn't effected (as much) when Altering the height and width.) After making adjustments to the vector img (changing the img to the resolution of your current platform) save it and apply it to your HTML. I would advise making a backup copy especially if your cross platforming you HTML for different resolutions.
为什么不将 img 导入 Flash（Microsoft 程序）并将 img 转换为矢量 IMG（矢量：改变高度和宽度时质量不会受到影响（尽可能多）的图像。）在对矢量 img 进行调整后（更改img 到您当前平台的分辨率）保存并将其应用于您的 HTML。我建议制作一个备份副本，特别是如果您跨平台使用不同分辨率的 HTML。
