我有一个固定宽度为 1000 像素和 margin:auto 的主中心列。
在固定列之外，如果用户的屏幕宽度大于 1000px，我希望在每个页面的最左下角和右下角有一个背景图像，无论内容显示多长时间页面或用户屏幕的宽度。
换句话说，如果屏幕上的内容太长以至于您需要滚动，那么最初您不会看到图像，因为它们位于页面底部。
同样，如果您调整浏览器窗口的大小，左右图像将移向主中心列。
我怎样才能做到这一点？
编辑
<style>
html{height:100%;}
body {
margin: 0;
font-family: 'DINMedium';
font-size:16px;
color: #ffffff;
background: #e0dcd3 url(../images/mainbg.png) repeat-x;
min-height:100%;
}
#leftBottomImg{position:absolute; bottom:0px;left:0px; background:url(../images/leftBottomImg.png);height:330px;width:300px;}
#rightBottomImg{position:absolute; bottom:0px;right:0px; background:url(../images/rightBottomImg.png);height:330px;width:300px;}
#slFooter{width:960px; margin:auto;height:400px;background: #e0dcd3 ;padding:20px;}
</style>
<body id="indexHomeBody">
<div id="mainWrapper">
<div id="headerWrapper">
<div class="left">
<div id="logo"><a href=""><img src="includes/templates/ceon/images/logo.png" alt="" width="273" height="58" /></a></div>
</div>
<div style="clear:both;"></div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
<tr>
<td valign="top">
<div id="slideshow">
<div id="nav"></div>
<a href="#"><img src="includes/templates/ceon/images/banner1.jpg" width="1000" height="369" /></a>
<a href="#"><img src="includes/templates/ceon/images/banner2.jpg" width="1000" height="369" /></a>
<a href="#"><img src="includes/templates/ceon/images/banner3.jpg" width="1000" height="369" /></a>
<a href="#"><img src="includes/templates/ceon/images/banner4.jpg" width="1000" height="369" /></a>
</div>
<div id="homeMidNav">
</div>
<div style="clear:both"></div>
<div id="homeBestSellers">
</div>
</td>
</tr>
</table>
<div id="leftBottomImg"></div>
<div id="rightBottomImg"></div>
<div id="slFooter"></div>
</div>
</body>
最佳答案
.center {
margin: auto;
width: 50%; height: 100%;
text-align: center;
border: 1px solid silver;
}
.main {
width:100%; height: 600px;
background: url('http://www.mojowallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-1.jpg') no-repeat right bottom,
url(http://www.mojowallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-3.jpg) no-repeat left bottom;
background-size: 20%;
}
@media screen and (max-width: 1000px) {
.main {
background-size: 25%;
}
}
关于html - 图片总是在页面底部，无论多长时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23645280/