Tło w HTML i CSS

pytanie zadane 20 listopada 2019 w HTML i CSS przez michalMonster Początkujący (390 p.)

Witam, chciałem stworzyć sobie prostą stronę internetową na której jest panel logowania. Niby wszystko łatwe ale nie do końca. Gdy zacznę w CSS robić pola logowania itp znika mi tło albo się rozszerza(wszytko na ss będzie), ale gdy usunę już z CSS pola logowania itp. tło jest normalne. Ktoś wie jak to naprawić?
Bez pola logowania: https://i.imgur.com/zo3suS0.png
Z polem logowania: https://i.imgur.com/86QEQD6.png

HTML:

<!DOCTYPE html>
<html lang="pl">
  <head>
      <meta charset="utf-8" />
      <title>Panel Logowania</title>
      <link rel="stylesheet" href="style.css" />
  </head>
  <body>
      <form class="box" action="index.html" method="post">
        <h1>Logowanie</h1>
        <input type="text" name="" placeholder="Login" />
        <input type="password" name="" placeholder="Hasło" />
        <input type="submit" name="" value="Zaloguj" />
      </form>
  </body>
</html>

CSS z samym tłem:

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-image:url('bg2.png');
  background-size: 100% 1000%;
}

CSS z tłem i polami:

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-image:url('bg2.png');
  background-size: 100% 1000%;
}

.box{
  width: 300px;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #191919;
  text-align: center;
}
.box h1{
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}

1 odpowiedź

odpowiedź 21 listopada 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

background-size: 100% 1000%;

To Ci wszystko psuje, wstaw sobie po prostu 100% i zobaczysz efekt.

komentarz 21 listopada 2019 przez michalMonster Początkujący (390 p.)
edycja 21 listopada 2019 przez michalMonster

Gdy ustawię na 100% to wygląda to tak: https://i.imgur.com/Ar5lazP.png Obrazek przesuwa się do góry przez co jego górna część pokazuje się na dole, a tak nie powinno być.