Stesso posizionamento per versione desktop e mobile

Ciao ragazzi, sto avendo una serie di problemi ad adattare e fissare due elementi input sia per la versione desktop, sia per quella da cellulare.
Quando adatto tutto per la versione desktop e apro la pagina web da cellulare, gli elementi sono sfalsati.
In sostanza, questo è ciò che accade:

Immagine

Qui di seguito il codice, dove sicuramente avrò fatto qualche casino con i CSS (sto ancora imparando)

css

Codice:

---

#boxWrapper {
    position: relative:
    width: 100%;
    height:100%;
}

.image_bg {
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(imgs/bg2.png);
    background-position: center top;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
}
@media (max-width: 500px) {
  .image_bg {
    min-width: 90%;
  }
}
.input_user {
    position: absolute;
    top: 37.6%;
    left: 44.3%;
}

.input_pass {
    position: absolute;
    top: 46.1%;
    left: 44.3%;
}

---

html

Codice HTML:

---

<div id="boxWrapper">
<div class="image_bg">
</div>
<input class="input_user" type="text" name="login" id="username" placeholder="user" />
<input class="input_pass" id="password" type="password" name="pass" placeholder="password" />
</div>

---