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

保持bg图像的纵横比：

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 */

}

如果有这些链接，请参考这些链接：

背景图像和固定高度粘滞页脚

1 个答案: