проблема заключается в том что когда я приближаю веб сайт рулеткой мыши, логин и пароль выходят за рамки .
Нужно оставить строки статическими, то есть чтобы при приближение они не менялись и оставались как на первой картинке, в том же положении.
<body>
<div id="principal">
<img id="fondo">
<img id="logo" src="./images/logo.png" >
<div id="registro">
<span>login</span>
<textarea id="login" rows="1" maxlength="20" ></textarea>
<br>
<span>password</span>
<textarea id="password" rows="1" maxlength="20" ></textarea>
</div>
</div>
</body>
#principal {
position: fixed;
margin:auto;
width: 100%;
height: 20%;
left: 0%;
}
#fondo {
position: fixed;
width: 100%;
height: 20%;
background: url(../images/principal.jpg);
background-size: cover;
background-size: cover;
background-position: center center;
z-index: -1;
top: 0;
left: 0;
}
#registro{
background-size: cover;
position: fixed;
width: 10%;
height: 8;
left: 85%;
bottom: 81%;
top: 2%;
}