多个背景图像放置

我想将背景图像放在页面的顶部和底部。顶部图像正常工作。然而，底部图像只能到达屏幕的底部，但我希望它能够到达延伸到屏幕之外的整个页面的底部。以下是我正在使用的代码：多个背景图像放置

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

如何将image2映射到网页的底部？

来源

2016-01-02 marshcakes

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

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

来源

2016-01-02 17:29:13 amespower

多个背景图像放置

回答

相关问题