屏幕底部或页面底部的背景图像
[英]Background-image at bottom of screen or at bottom of page
问题描述
I have two background-images. 
我有两个背景图片。 I want them to be fixed at the bottom of screen or at the bottom of page if the info on page is too much. 如果页面上的信息太多，我希望将它们固定在屏幕底部或页面底部。 I'm able to code only one of the situations - background-images are fixed to the bottom of screen or to the bottom of page(body{}). 我只能编写一种情况的代码-背景图像固定在屏幕底部或页面底部（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;
}
In the first picture the background image is fixed to the bottom of body: http://www.bildites.lv/viewer.php?file=ivbdtsimebot29u96rs8.jpg 在第一张图片中，背景图片固定在主体底部： http : //www.bildites.lv/viewer.php?file=ivbdtsimebot29u96rs8.jpg
In this picture the background is fixed to the bottom of screen: http://www.bildites.lv/viewer.php?file=yzrixvjqec2qe3fgu396.jpg 在此图片中，背景固定在屏幕底部： http : //www.bildites.lv/viewer.php?file=yzrixvjqec2qe3fgu396.jpg
I scrooled the page down to see the problem if the picture is fixed to the bottom of the screen. 如果图片固定在屏幕底部，我将页面向下翻页以查看问题。 I want to make the background-images to be fixed to the bottom of the screen if the info on the page isn't that much or the bottom of body if the info is enough for scrooling down. 如果页面上的信息不是那么多，我想将背景图像固定在屏幕底部，如果信息足以用于抄写，我想将背景图像固定在屏幕底部。 And I don't want the background-images to be fixed to the bottom of screen all the time because the it will mix with main content. 而且我不希望背景图像始终固定在屏幕底部，因为背景图像会与主要内容混合在一起。
I have been trying to solve this problem for few days now but I can't get it to work like that. 我几天来一直在尝试解决此问题，但我无法使其那样工作。
1 个解决方案
解决方案1
0 已采纳 2013-03-21 23:49:53
Something like this? 像这样吗
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.