Я новичок в HTML и CSS и не понимаю, что я сделал не так с моей таблицей стилей

Question

Я довольно новичок в кодировании и практикую разработку базовой страницы-заставки с некоторыми ссылками, которые я затем смогу превратить в полноценный, многостраничный сайт.Я не понимаю, почему мой фон не будет заполнять весь экран на половине и на всех экранах.Я также не понимаю, что я делаю не так с моим неупорядоченным списком условий обслуживания (я хочу, чтобы он был внизу страницы)

li .service-link {
    color: #313131;
}

.service-nav, .service-list, .service-item {
    list-style-type: none;
    display: inline-block;
}

.terms{
    text-align: center;
    position: relative;
}

html {
    background-image: url("../Final Logo Assets/Blur Mug-min Opacity-min.jpg");
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}   

 <div class="terms" id="termsofservice">
<ul class="service-nav">
  <li class="service-item">
  <a class="service-link" href="#">Privacy Policy</a>
      </li>
  <li class="service-item">
  <a class="service-link" href="#">Terms of Service</a>
      </li>
      </ul>
</div>

Answer 1

см. Ссылку js fiddle ** используйте селектор тела и добавьте высоту **

body {
    background-image: url("../Final Logo Assets/Blur Mug-min Opacity-min.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;