Responsive Web Design

Looking for some help here.

I’m attempting to create a login screen that uses an image with input blocks on it for the username and password. Here the catch I want the blocks to remain in the same place on the image as the screen is resized.

here is what I have now;

<img src=“images/login.png” position: absolute; top: 1%; left: 10%" />

    <p style="postion: relative;">
        <input class="w3-input" type="text" name="username" style="text-align:center;height: 35px; z-index: 1; position: absolute; top: 20%; left: 10%; width: 16%;" >
    </p>

</>


looks good full screen, but as I resize it the input blocks move out of position.

???