I'm new to html and css and don't understand what I've done wrong with my Style Sheet

Question

I'm quite new to coding and have been praciticing designing a basic splash page with some links that I can then develop further into a full, multi-page site. I don't understand why my background won't fill the entire screen on half and full screens. I also don't understand what I'm doing wrong with my Terms of service unordered list (I want it to be at the bottom of the page)

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>

Providing a screenshot or a jsFiddle ‘ll make it easier to help. — Ahmed Hammad, Feb 24 '19 at 11:59
[IMG]http://i63.tinypic.com/a9n6ab.jpg[/IMG] [IMG]http://i63.tinypic.com/a9n6ab.jpg[/IMG] — Michael Davidson, Feb 24 '19 at 12:03
Possible duplicate of [Make body have 100% of the browser height](https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) — Martin, Feb 24 '19 at 12:05

score 0 · Answer 1 · answered Feb 24 '19 at 12:21

see js fiddle link**use body selector and add height **

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;

I'm new to html and css and don't understand what I've done wrong with my Style Sheet

1 Answers1