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

Question

我知道如何将横幅图片放在页面顶部，但我也知道如何将横幅图片放在页面底部。我的顶部横幅代码是:

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

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

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

Answer 1

我建议使用背景图片。

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