html - 背景图片和固定高度的粘性页脚

Question

这是我的 html/css 的框架:http://jsfiddle.net/GMg7B/ .

现在我想为 div#content 部分添加背景图片，以便:

• 它会调整大小以适合其容器(类似于 background: cover)
• 不与页脚重叠。
• 保持图像的纵横比。
• 调整背景图片的高度以适应“屏幕全高减去页脚高度”，必要时用白色背景填充两侧以填满整个宽度。
• 页脚具有固定高度，它始终被推到页面底部并且在没有滚动条的情况下保持可见，与屏幕高度无关。

非常感谢。

Answer 1

将这个添加到你的 #content cs

  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size:  100% 100%;

为什么它延伸到页脚？？ 因为你的行 margin: 0 auto -120px; 与 footer

working demo

即使 background-size: cover; 如果您删除 -120px 边距也能工作!!

cover demo

保持背景图像的纵横比:

aspect ratio demo
只需从我上面引用的 css 中删除 fixed 即可!

至于页脚留在底部

你可以使用 css calc() 方法:

类似的东西:

#footer{
  margin-top : calc(100% - footer_height_in_px); /* default */
  margin-top : -moz-calc(100% - footer_height_in_px); /* moz */
  margin-top : -webkit-calc(100% - footer_height_in_px); /* webkit browsers */

}

如果您感兴趣，请引用这些链接:

• > http://css-tricks.com/a-couple-of-use-cases-for-calc/
• > https://developer.mozilla.org/en-US/docs/Web/CSS/calc