背景內容圖像需要堅持底部

我試圖推動我的背景內容圖像，並使其堅持到我的頁面底部。圖像不是頁腳，因爲圖像將隱藏在某些內容的後面。但是，當內容很少時，圖像不應該在頂部切斷，並且在有大量內容時應該堅持到底部！背景內容圖像需要堅持底部

現在還沒有工作。任何人有我的任何提示？

這裏有兩個例子。一個內容適合窗口，另一個內容更多。

這裏有兩個鏈接;

http://www.andrewa.org/testing/mosaik-test/content-imagebottom-test.html

http://www.andrewa.org/testing/mosaik-test/content-imagebottom-test2.html

預先感謝您的鄉親！

來源

2011-05-18 Andrew

我會用background-attachment: fixed;把圖片作爲背景，以body並添加：

html, body { 
    height: 100%; 
}

所以總的是：

html, body { 
    height: 100%; 
} 
body { 
    background-image: url("images/bg_content.gif"); 
    background-position: center bottom; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
}

來源

2011-05-18 20:24:15 jeroen

嗯哦？我upvoted它，但我不能接受答案，因爲它不是我的問題 – Sotkra 2011-11-01 16:45:55

@Sotkra duhhhh，我只看到你的評論，並認爲這是你的問題.... – jeroen 2011-11-01 23:36:09

np - 它發生...人們問問題然後消失 – Sotkra 2011-11-03 14:27:46

背景應用於您的包裝，並設置背景如你所做的那樣將位置置於底部。訣竅是在包裝上設置與背景圖像高度相同的最小高度。當內容很多時，這將解決沒有足夠內容的問題，同時仍然隨頁面一起增長。

來源

2011-05-18 20:25:54 Jrod

我相信你的問題是雙重的。首先，你的＃content-image div有一個設定的高度。刪除那個高度。

其次，因爲您的內容在該div內浮動，您需要清除＃content-image div上的浮動內容。例如：「overflow：hidden; clear：both」

試試看。

來源

2011-05-18 20:30:58

一個粘腳和一個粘滯的背景。將背景圖片的高度作爲頁腳高度，並確定需要將多少圖片與您的內容重疊。要讓粘性頁腳「消失」，請在主頁邊空白處使用與頁腳高度相同的數字。這是來自原始設計的粘性頁腳的緩和設計：http://www.webcreationz.nl/de-ultieme-sticky-footer-code（抱歉，網站位於荷蘭語）。

我剛剛明白了這一點。我希望它能幫助別人。

HTML：

<div id="container"> 

    <div id="main">text of your website</div> 

    <div id="spacer"></div> 

</div> 

<div id="footer"></div>

CSS：

html, body { 
    height: 100%; 
} 


#container { 
width: auto; /* with number center with margin: 0 auto;*/ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-bottom: -175px; /* height footer */ 
} 

#main { 
    height: auto; 
    width: 618px; 
    float: right; 
    margin-top: 10px; 
    padding: 20px; 
    background-color: #FFF; 
    border: 1px solid #E1E4EC; 
    margin-bottom: -100px; /* overlap of 100 px into footer */ 

} 

#spacer { 
    display: block !important; 
    height: 175px; /* height footer */ 
} 

#footer { 
    clear: both; 
    height: 175px; /* height footer */ 
    width: auto; /* with number center with margin: 0 auto;*/ 
    background-image: url("images/plaatje jpg"; /* background picture */ 
    background-repeat: no-repeat; 
    background-position: center bottom; 
}

來源

2014-04-11 13:20:01 Kavana

背景內容圖像需要堅持底部

回答

相關問題