CSS text position relative to background - html

Question

So I'm more of a backend than a frontend dev,
I'm having some difficulty on css.
<div className="--Hero">
<div className="--Hero-container-text">
<h1>this is me</h1>
<p>hello</p>
note: className is because of react.
I want the text to stay relative to the background image on hero-container-text as seen below.
another example showing a different viewport.
Here's the css.
.--Hero {
width: 100%;
height: 90vh;
background-image: url("./images/homepage/manpass.svg");
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
.--Hero-container-text {
position: fixed;
left: 60%;
top: 40%;
padding: 0 60px;
}

Answer 1

You should add position:relative; to your --hero and position:absolute; to your
--Hero-container-text
you set the div you want to technicaly be your canvas with a position: relative;
Avoid using percenteges for the positioning since they will most likely break ,instead use left 0 right 0 with auto margin , the code will look something like this :
.--Hero {
width: 100%;
height: 90vh;
background-image: url("./images/homepage/manpass.svg");
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
position:relative;
}
.--Hero-container-text {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}