背景图像使用HTML5来适应页面

我想使一个图像成为网站的完整背景！我知道这听起来很简单,但它只是让我疯狂,它不适合的页面,这是我达到的最后一次尝试！

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

解决方法

编辑：我创建了一个 DEMO,删除了一些不必要的东西.这样做的好处不在于你的背景图片. DEMO工作,但没有像以下引用的代码一样广泛测试.

我最近在一个项目上工作,我们需要这个确切的事情.我从我的项目文件发布,所以有些可能是不必要的,因为它是一个写这个的团队成员.

首先设置html和body的属性.
然后,我有一个内部的根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%;
}

再一次,我确信是不必要的,但我希望它有所帮助.

原文地址：https://www.jb51.cc/html5/168090.html