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

这是我的html/css的框架：http://jsfiddle.net/GMg7B/。背景图片和固定高度的粘页脚

现在我想添加一个背景图像div#content一部分，这样：

它调整大小以适应其容器（像background: cover）
不与页脚重叠。
图像的高宽比保持不变。
调整背景图像的高度以适应“屏幕的全高减去页脚高度”，如有必要，填充白色背景以填充全宽。
页脚具有固定的高度，它总是被推到页面的底部，并且在没有滚动条的情况下保持可见，与屏幕的高度无关。

非常感谢。

来源

2014-01-14 deivid

你的意思是“不与页脚重叠”。您已经为页脚的内容设置了一个“-120像素”的边距，将始终重叠。 [** DEMO **]（http://jsfiddle.net/Ruddy/GMg7B/2/）< - 那样？ – Ruddy

在你的小提琴中，页脚不是固定宽度 – Abhitalks

有什么不对？ http://jsfiddle.net/GMg7B/3/ –

它添加到您#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 */ 

}

请参考以下链接，如果它intersets你：

来源

2014-01-14 08:03:16 NoobEditor

你为什么总是在身边！ +1，因为我认为这是OP要求的。即使是OP，由于某种原因，内容上有一个奇怪的“-120像素边距”。 – Ruddy

@Ruddy：嗨...无论是我还是外星人，你有作为朋友....所以只是想过路过！ – NoobEditor

感谢@NoobEditor，我正在尝试你的小提琴，我已经编辑了我的问题。我很难让自己明白，对不起。 – deivid

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

回答

相关问题