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