使用HTML5适应页面的背景图像
使用HTML5适应页面的背景图像
提问于 2013-06-13 01:07:42
我想让一张图片作为网站的完整背景！我知道这听起来很简单，但它让我抓狂，它不适合页面，这是我达到的最后一次尝试！
CSS：
body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}我也在使用Twitter Bootstrap，但即使没有它，我也不能正确使用它！
任何帮助都将不胜感激。
编辑:我没有使用精确的像素，因为我想做一个响应式+移动的设计。
我不知道为什么他们否决了这个问题！但这就是我解决问题的方法！
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%;
}回答 4
Stack Overflow用户
回答已采纳
发布于 2013-06-13 02:09:47
编辑:我创建了一个DEMO，去掉了一些不必要的东西。这样做的好处是不需要开窗口化背景图片。DEMO可以工作，但没有像下面引用的代码那样经过广泛测试。
我最近做了一个项目，我们需要这样的东西。我是从我的项目文件中发布的，所以其中一些可能是不必要的，因为这是一个团队成员写的。
首先设置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%;
}再说一次，我确信其中的一些是不必要的，但我希望它能有所帮助。
Stack Overflow用户
发布于 2013-06-13 01:20:54
您可以通过添加属性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;
}但你必须知道，如果页面尺寸和图像尺寸的比例不同，则可以在窗口中裁切图像。
编辑
如果高度更重要，请将参数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;
}Stack Overflow用户
发布于 2013-06-13 01:23:48
您需要设置页面第一个元素的高度。
html, body { margin:0; height: 100%;}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17071297
复制相关文章
相似问题
腾讯云开发者
