html - 在页面顶部和底部添加横幅图像

我知道如何在页面顶部放置横幅图像，但是如何在底部放置横幅图像。我在顶部的横幅代码是：

<img src="Pics/images4.jpg" alt="wave lines" id="image">

#image {
  width: 100%;
  height: 225px;
}

我不希望图像固定或居中，而是从左到右延伸。这样，当有人到达页面底部时，他们将在屏幕上看到与顶部相同的图像。

最佳答案

我建议使用背景图片。

codepen

html {
  background: url("//dummyimage.com/4000x200") center top / auto 100px no-repeat, url("//dummyimage.com/4000x200") center bottom / auto 100px no-repeat;
  min-height: 100%;
  padding: 100px 0;
  box-sizing: border-box;
}