背景图像使用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%;
}

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

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码