Background image zooming in when hamburger menu clicked on Saf

Question

I'm working on a simple website for a band. You can view it here. On the desktop version, everything works nicely but on my iPhone, the background image zooms in when the hamburger menu is clicked. I'm assuming this is because the height of the page changes when the menu is opened, causing the site to resize the height of the page to accommodate the additional content. I'd like the mobile site to behave the same as the desktop site: background is a fixed cover that does not repeat. This is my first project so any help/constructive comments would be greatly appreciated!

html {
  background: url(264H.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  font-family: Futura, sans-serif;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: inline-block;
  color: #FFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {
  background-color: #555;
}

ul.topnav li.icon {
  display: none;
}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

.parent {
  margin: 0 auto;
  width: 75%;
  background-color: white;
  border: 2px solid black;
  background-color: rgba(255, 255, 255, 0.5)
}

.child {
  width: 75%;
  padding: 3px;
  border: 1px solid black;
  margin: .5em auto;
}

.video-container {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
  position: relative;
}

.video-container iframe,
.video-container object,
.video-container embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#footer {
  text-align: center;
  bottom: 0;
  width: 100%;
}

#content {
  width: 80%;
  max-width: 576px;
}

<ul class="topnav" id="myTopnav">
  <li><a href="index.htm">BE COOL COWBOY</a></li>
  <li><a href="releases.html">Releases</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="https://becoolcowboy.bandcamp.com/merch/mammoth-sticker">Merch</a></li>
  <li><a href="http://becoolcowboy.bandcamp.com">Bandcamp</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

<!-- Begin Songkick Shows Widget -->

<a href="http://www.songkick.com/artists/8724879" class="songkick-widget" data-theme="light" data-track-button="on" data-detect-style="true" data-font-color="#ffffff" data-background-color="transparent"></a>
<script src="//widget.songkick.com/widget.js"></script>

<!-- End Songkick Shows Widget -->

<br></br>

<!--Social Media Icons Footer-->

<div id="footer" style="text-align:center;">
  <a href="https://facebook.com/becoolcowboy"><img border="0" alt="Be Cool Cowboy Facebook" src="faceicon.png" width="42" height="42"></a>
  <a href="https://twitter.com/becoolcowboy"><img border="0" alt="Be Cool Cowboy Twitter" src="twiticon.png" width="42" height="42"></a>
  <a href="https://instagram.com/becoolcowboy"><img border="0" alt="Be Cool Cowboy Instagram" src="instaicon.png" width="42" height="42"></a>
  <a href="https://www.youtube.com/channel/UCsA_q-aK0mVF0H6IBe8pQlg"><img border="0" alt="Be Cool Cowboy YouTube" src="yticon.png" width="42" height="42"></a>
</div>

<!--navbar script-->

<script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
</script>

Answer 1

add a max-height to the container that is holding the background-image, which, in your case is <html>.

html {
  background: url(264H.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-height: 100vh;
}

Setting max-height to 100vh (vh are viewport units. vh is view-height), will make sure the container's height won't exceed the viewport height, thus containing the image to what's visible to the user—regardless of any changes that might toggle other DOM nodes.

More on viewport units, and their support here: http://caniuse.com/#feat=viewport-units