изменение размера браузера перемещает мою кнопку

Question

У меня есть фоновое изображение, я пытаюсь поместить кнопку где-то посередине внизу.Но когда я перемещаю браузер влево или в сторону экрана, кнопка слегка перемещается.Но я хочу, чтобы он остался именно там, где был раньше.Может кто-нибудь сказать мне, что я делаю не так?Вот мой CSS ниже.

body
{
    margin:0;
    padding :0;
    background:url(ht.JPG);
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size:cover;
    background-repeat: no-repeat;
    font-family:sans-serif;
}

#loginbutton 
{
    font-weight: bold;
    font-size:18px;
    opacity:0.6;
    align-items: center;
    text-align:center;
    border:none;
    height:100px;
    width:100px;
    border-radius: 50%;
    background:transparent;
    color:black;
    background-color:#EAEAEA;



    position: absolute;
    top:69%;
    left:45%;


}

Ниже моя кнопка на html.

<a href="register.html" ><button type="submit" value="Submit" id="loginbutton">Login</button></a>

Answer 1

Я попытался подогнать фоновое изображение к высоте окна:

     [https://jsfiddle.net/n09sos3c/3/][1]

Обратите внимание, что при очень малых разрешениях окна кнопка не будет помещаться в нужном месте, поскольку изображение будет уменьшаться, ноКнопка не будет.

Вы можете узнать о сокращении фона здесь: https://css -tricks.com / almanac / properties / b / background /