javascript - Background image zooming in when hamburger menu clicked on Saf -
i'm working on simple website band. can view here. on desktop version, works nicely on iphone, background image zooms in when hamburger menu clicked. i'm assuming because height of page changes when menu opened, causing site resize height of page accommodate additional content. i'd mobile site behave same desktop site: background fixed cover not repeat. first project help/constructive comments 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 { 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 , (max-width:680px) { ul.topnav li:not(:first-child) { display: none; } ul.topnav li.icon { float: right; display: inline-block; } } @media screen , (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 { 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()">☰</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>
add max-height container holding background-image, which, in case <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 100vh (vh viewport units. vh view-height), make sure container's height won't exceed viewport height, containing image what's visible user—regardless of changes might toggle other dom nodes.
more on viewport units, , support here: http://caniuse.com/#feat=viewport-units
Comments
Post a Comment