2013-03-21 108 views
1

我有兩個背景圖像。如果頁面上的信息太多,我希望它們固定在屏幕的底部或頁面的底部。 我只能編寫其中一種情況 - 背景圖像固定在屏幕底部或頁面底部(body {})。屏幕底部或底部的背景圖像

body { 
    line-height: 1; 
    background-attachment:scroll; 
    background-image:url(images/fonskreisapuse.png), url(images/fonslabapuse.png); 
    background-repeat:no-repeat; 
    background-position:bottom left, bottom right; 
} 

在第一張照片的背景圖像被固定到主體的底部: http://www.bildites.lv/viewer.php?file=ivbdtsimebot29u96rs8.jpg

在該圖象的背景被固定到屏幕的底部: http://www.bildites.lv/viewer.php?file=yzrixvjqec2qe3fgu396.jpg

我scrooled的如果圖片固定在屏幕的底部,則可以向下翻頁以查看問題。如果頁面上的信息不是那麼多,或者如果信息足以讓人sc目結舌,我想讓背景圖像固定在屏幕底部。我不希望背景圖像始終固定在屏幕的底部,因爲它會與主要內容混合在一起。

我一直在試圖解決這個問題好幾天了,但我無法像這樣工作。

+0

您是否能夠將圖像放在

中,並使用粘滯頁腳使其保持在底部? – Alyce 2013-03-21 23:27:55

+0

嗯,這可以很好的工作,我會明天嘗試,並在這裏回覆。謝謝。 – user1816780 2013-03-21 23:33:35

回答

0

是這樣的嗎?

<!DOCTYPE html> 
<html> 
<head> 
<style> 
html{ 
    min-height:100%; 
    background-attachment:scroll; 
    background-image:url(https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg), url(https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg); 
    background-repeat:no-repeat; 
    background-position:bottom left, bottom right; 
} 
body { 
    line-height: 1; 
    padding-bottom:200px; 
} 
</style> 
</head> 
<body> 
<p>sample text</p> 
<script> 
addContent = function(){ 
    var p = document.createElement('p') 
    var b = document.getElementsByTagName('body')[0] 
    var t = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tincidunt urna at ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id mauris arcu, sit amet suscipit sem." 
    var l = new Array(10) 
    p.appendChild(document.createTextNode(l.join(t))) 
    b.appendChild(p); 
    return false 
} 
</script> 
<a href="#" onclick="return addContent()">add content</a> 
</body> 
</html> 
+0

作品幾乎完美。背景圖像不顯示在其全高,它以某種方式裁剪。 http://www.bildites.lv/viewer.php?file=m3fmy5r4f41222dph3e.jpg – user1816780 2013-03-22 13:14:45

+0

@ user1816780:不知道,我猜測:html {background:#fff} body {background:transparent} – 2013-03-22 16:13:31

+0

它工作時,我加了 背景:透明;身體。非常感謝。 :) – user1816780 2013-03-22 17:59:26