Question

我有一个主中心列，固定宽度为1000像素，边距为：自动。

如果用户的屏幕宽度大于此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>

Answer 1

sample

.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%;
}


}

Answer 2

检查下面的jsfiddle。你看起来像那样吗？

.main {
margin: auto;
width:52%; height: 600px;
text-align: center;
border: 1px solid silver;

}
body {
width:98%; 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: 22%;
}

@media screen and (max-width: 1000px) {
.main {  
 background: none;
}
   body {
  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: 22%;

}

}

http://jsfiddle.net/6t5WW/1/

无论多长时间，图像始终位于页面底部

2 个答案: