Issues scaling ul li with background img

Question

So, I'm currently messing around with building a web page and I'm having issues getting an list to scale with the background image when resizing the web page. For example, I have text in the center of the page that is also in the middle of the background image but when I resize the page the text moves up the screen while the background image gets bigger. How does one get the text to scale with the background image..? Is this possible? Should the <ul <li and the background image be under one <div? I know im missing something here..

#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

#imagescale {
  width: 100%;
  height: 100%;
}

#imagescale {
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
}

#imagescale:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.35rem;
}

.stretch {
  width: 100%;
  height: 100%;
}

html {
  background: url(https://www.pexels.com/photo/laptop-on-desk-near-lush-houseplant-5797997/) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html,
body {
  height: 100%;
}

.container {
  bottom: -20px;
  right: -15px;
  min-height: auto;
  max-height: 100px;
  position: relative;
  display: block;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 3vmin;
  word-wrap: break-word;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.container .center {
  display: block;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.background {
  width: 100%;
  height: 600px;
}

img {
  max-width: 100%;
  max-height: auto;
}

ul {
  list-style-type: none;
  background-size: contain;
}

<div id="wrapper">
  <div class="background">
  </div>
</div>
<div class="nav-bar">
  <div id="imagescale" class="stretch">
  </div>
  <div class="container" id="nav-menu">
    <div class="center">
      <ul>
        <li> <a href="/">text</a></li>
        <li> <a href="/">text</a></li>
        <li> <a href="/">text</a></li>
      </ul>
    </div>
  </div>

</div>

Example Image

Answer 1

see if this is what you are looking for

* {
  margin: 0;
  padding: 0;
}

.image-scale {
  background: url(https://images.pexels.com/photos/5797997/pexels-photo-5797997.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  object-fit: cover;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.menu {
  background-color: teal;
}

.menu ul {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: violet;
  list-style-type: none;
  background-size: contain;
}

<div class="image-scale">
  <div class="menu">
    <ul>
      <li> <a href="/">text</a></li>
      <li> <a href="/">text</a></li>
      <li> <a href="/">text</a></li>
    </ul>
  </div>
</div>

EDIT NEW:

.image-scale {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.image-scale2 {
    position: relative;
}

.image-scale2 img {
    max-width: 100%;
    width: 100vw;
    height: 100vh;
}

.menu {
    position: absolute;
    background-color: teal;
}

.menu ul {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: violet;
    list-style-type: none;
    background-size: contain;
}

<div class="image-scale">
    <div class="image-scale2">
        <img src="https://images.pexels.com/photos/5797997/pexels-photo-5797997.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="">
    </div>
    <div class="menu">
        <ul>
            <li> <a href="/">text</a></li>
            <li> <a href="/">text</a></li>
            <li> <a href="/">text</a></li>
        </ul>
    </div>
</div>