How do I get an image to appear behind the header?

Question

I am currently working in HTML and CSS. I need to make an image the background of the header.

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

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

Answer 1

The background shorthand property overrides the background-image property. Use background-color instead of the former, or include the color value in it.

See https://developer.mozilla.org/en-US/docs/Web/CSS/background.

#banner {
  padding: 60px;
  text-align: center;
  background: #1abc9c url("https://via.placeholder.com/300x100");
  /* or this:
  background-image: url("https://via.placeholder.com/300x100");
  background-color: #1abc9c;
  */
  background-repeat: no-repeat; /* for demo only */
  color: white;
  font-size: 30px;
}

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