CSS/HTML make text stay the same position relative to an image resizing?

Question

How do I make it so that when the image resizes, the text stays in the same position relative to the image when it resizes. Here is what is happening currently:

Full screen view:

Resized:

The text does not stay in the same place when the image went smaller, How do I make the text stay in the same place (under the line that points to it) when the image resizes?

Relevant code: HTML:

<div id="BG1">
        <div id="BG2">
<div id="slide1">
    <p1>Choose<br>
        your<br>
        Route</p1>
    <p2 id="Tongariro">Tongariro</p2>
<img src="img/NZ6.png" id="NZi2" >   
    </div>
    </div>
    </div>  

CSS:

* {
    margin:0;
    padding: 0;
    }
slide1, #slide2{ width: 100%; } 

#slide1{
    height: 600px;
    margin: 0;
    padding: 200px 0 260px 0;
}
#BG1{
    background: url("../img/IMG_3708.jpg");
    background-size: cover;

    }
#BG2{
    background-color: rgba(103, 128, 159,0.79);
}
#Tongariro{
position: relative;
top:27%;
left:34%;
font-size:40px;
}
#NZi{
    width:35%;
    display:block;
    clear:both;
    margin: 0;
    position: absolute;
    z-index: 0;
    top: 55%;
    left: 60%;
    transform: translate(-50%, -50%) ;
    }

Answer 1

You're defining the distance by px - that means, even if the window resizes, the distance stays the same - it's a fixed number of pixels, thus not relative to the window size.

A better unit would be % - ie,

#slide1
{
height: 30%;
margin: 0;
padding: 10% 0% 12% 0%;
}

This way, the distance will be relative to the screen size, and if you adjust the numbers correctly, everything will stay in the position you want it to - window full, or resized.

Read more! :)