Question

我正在尝试在页面的顶部和底部放置背景图像。顶部图像工作正常。但是，底部图像只会到达屏幕的底部，但我希望它会显示在整个页面的底部，这会延伸到屏幕之外。这是我正在使用的代码：

body { 
background-image: url('../images/image1.jpg'), url('../images/image2.jpg'); 
background-repeat: repeat-x, repeat-x; 
background-position:left top, left bottom; 
}

如何将image2放到网页的底部？

Answer 1

在div标记内放置一个绝对定位的body，并使用该标记包含底部图像。

    <body>
       <div id="bottom-pic">
          Image here
       </div>
    </body>

   body { 
      position: relative;
      background-image:url('../images/image-top.jpg'); 
      background-repeat: repeat-x; 
      background-position:top left;
    }
    #bottom-pic{
      width:100%;
      height:200px;
      background-image: url('../images/image-bottom.jpg'); 
      background-repeat: repeat-x; 
      background-position:bottom left;
      position: absolute;
      bottom:0;
      left:0;
    }

多个背景图像放置

1 个答案: