I want to place the text and headers I added in my code above the image I set in. Every time I center the text, the image is always covering it. The text and headers I have has to be above the image and not under.

#eventcenterimg {
  text-align: center;
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
}

#starting-info {
  text-align: center;
  margin-left: 40vh;
  font-family: 'Roboto Condensed', sans-serif;
  color: black;
  display: inline;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<link href="https://fonts.googleapis.com/css2?family=Roboto Condensed:wght@300;400&display=swap" rel="stylesheet">

<img src="img/correaevent.png" height="970" alt="" id="eventcenterimg">
<div >

  <h4 id="starting-info">Book and experience any special events at Correa Events Center.</h4>
  <h4 id="starting-info">Call to book at:</h4>
</div>
<div >
  <a href="https://www.facebook.com/people/Correas-Event-Center/100077040368594/" target="_blank"><i ></i></a>
</div>

CodePudding user response：

Just an alternative minimal solution, you could also set z-index: -1 for the <img> as a quick fix, without making changes on other elements.

Example:

#eventcenterimg {
  /*