如何在HTML和CSS中为头部设置背景图片？

我目前正在使用HTML和CSS进行开发，需要为页面头部设置一张背景图片，相关代码示例如下：

CSS 代码 #

#banner {
  padding: 60px;
  text-align: center;
  background-image: url("https://via.placeholder.com/800x300");
  background-color: #1abc9c;
  color: white;
  font-size: 30px;
}

HTML 代码 #

<div id="banner">
  <h1>AlexArgent</h1>
  <p>My Personal Homepage</p>
</div>

内容的提问来源于stack exchange，提问作者AlexArgent