將多個背景對齊到頁面底部？

我正在創建一個由印刷設計師設計的網站。兩個圖像的背景concists：將多個背景對齊到頁面底部？

一個梯度，其沿y軸repeteated並用與該頁面的底部對齊，居中顯示在頁面一個圖像的底部對齊（圓圈）

演示： enter image description here

圓圈部分是相當大的，並有大部分的網頁內容。（〜900px〜750px）。

如果頁面很小，我需要添加滾動條。如果頁面很大。我需要第一張圖像（垂直）和背景色（水平）來爲我填充區域。我想使用多個背景，但該網站需要IE8支持。

來源

2013-01-17 Himmators

爲梯度剪一個1px帶，並在身體上水平重複。將附件設置爲固定。

剪出圓圈並將其作爲內容容器的背景圖像。這可能是一個透明的PNG，可以讓上一個漸變顯示出來。

CSS

body { 
    background: url('bg.jpg') center bottom repeat-x fixed; 
} 

.container { 
    background: url('circle.png') no-repeat center bottom; 
    margin: 0 auto; 
    min-height: 750px; 
    width: 900px; 
}

HTML

<body> 
<div class="container"> 
    content here 
</div> 
</body>

來源

2013-01-17 18:00:59 Jrod

不要忘記將其調整至底部：'背景：網址（「bg.jpg」）中心底部重複-x固定;' – CodeMoose

實際上，1px高/寬的重複背景圖像會導致在某些瀏覽器中緩慢滾動。最好用一個10-20px高/寬的去。 – cimmanon

@cimmanon以前從未見過。你能提供一個鏈接或文章或特定的瀏覽器嗎？ – Jrod

或者，你可以使用CSS3來放置梯度，避免圖像完全。一些較舊的瀏覽器不支持它，但比使用靜態漸變圖像更靈活一些。

退房這個方便的生成 - 只需選擇的顏色和風格，它會給你的代碼：http://www.colorzilla.com/gradient-editor/

來源

2013-01-17 18:06:48 CodeMoose

將多個背景對齊到頁面底部？

回答

相關問題