I’ve been trying to place text on top of an image for my webpage and so far here is my code:
html:

<div class="wrapper">
    <img id="background" src="header.png" alt="Background Image">
    <div id="content">
      <div class="SignIn">
        <h1 class="entry-title">Sign In</h1>
        <p>Enter your credentials below</p>
      </div>
  </div>

css:

h1.entry-title {
  font: weight 600;
  text-align: center;
}

.SignIn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Im trying to do this
the sign in part