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

您可以通过添加属性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

但是你必须知道，如果页面尺寸和图像尺寸的比例不同，那么可以在窗口中剪切图像。

修改

如果您的身高更重要，请将参数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;
}

<强> Contain Demo

Answer 3

您需要为页面的第一个元素设置高度。

html, body { margin:0; height: 100%;}

在此处查看更多信息：

http://imasters.com.br/front-end/css/por-que-height-100-nao-funciona/

Answer 4

为什么不将img导入Flash（Microsoft程序）并将img转换为Vector IMG（Vector：图像，当改变高度和宽度时，质量不受影响（同样多）。）对矢量img进行调整后（将img更改为当前平台的分辨率）保存并将其应用于HTML。我建议制作一个备份副本，特别是如果你跨平台使用不同分辨率的HTML。

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

4 个答案:

修改