Placing text over an image

Issue

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:[email protected];400&display=swap" rel="stylesheet">

<img src="img/correaevent.png" height="970" alt="" id="eventcenterimg">
<div class="correa-events-info">

  <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 class="socialmedia">
  <a href="https://www.facebook.com/people/Correas-Event-Center/100077040368594/" target="_blank"><i class="fab fa-facebook-f"></i></a>
</div>

Solution

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 {
  /* 👇 Add this */
  z-index: -1;
  text-align: center;
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
}

Answered By – John Li

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published