使用HTML5的背景图像适合页面

Question

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

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

Answer 1

编辑:我创建了一个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%;
}

同样,我确信其中一些是不必要的,但我希望它有所帮助.

Answer 2

You can do this by adding property 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;
}

DEMO

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-size to 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;
}

Contain Demo