內容後面的半粘性頁腳

Question

我試圖從360px高度的圖像創建粘性頁腳，但我喜歡將160px的圖像放在內容後面並保留爲200px以保持粘性。 我的CSS是：

html { 
position: relative; 
min-height: 100%; 
} 

body { 
margin: 0 0 360px; 
background: #049ec4 
} 

#wrap { 
width: 90%; 
border-radius: 8px; 
background: #809FFF 
} 

footer { 
position: absolute; 
left: 0; 
bottom: 0; 
height: 360px; 
width: 100%; 
background: #049ec4 url("http://phonegap.com/css/images/cloud.jpg") 0 50% repeat-x; 
} 

http://jsfiddle.net/RC3Za

，而是創造一個不必要的空間，我喜歡的CSS輸出是這樣的：

Answer 1

您可以將頁腳位置改變到相對，而是使用底部屬性，將top屬性設置爲-250px或任何你想要的。將z-index屬性設置爲-1以將其置於換行之後。

到這裏看看：http://jsbin.com/picazedu/1/edit

編輯： 更好的解決方案，以避免頁腳顯示在窗口的中間，正在申請的背景圖像對身體並與background-position:bottom left調整它屬性。現在你可以給你想要的高度footer適合你想要的背景圖片：http://jsfiddle.net/YQMyc/4/