0
Ich arbeite an einer einfachen Website für eine Band. Sie können es here ansehen. Auf der Desktop-Version funktioniert alles gut, aber auf meinem iPhone wird das Hintergrundbild vergrößert, wenn auf das Hamburger-Menü geklickt wird. Ich gehe davon aus, dass sich die Höhe der Seite ändert, wenn das Menü geöffnet wird, wodurch die Größe der Seite geändert wird, um den zusätzlichen Inhalt aufzunehmen. Ich möchte, dass sich die mobile Website wie die Desktop-Website verhält: background ist eine feste Abdeckung, die sich nicht wiederholt. Dies ist mein erstes Projekt, daher würde jede Hilfe/konstruktive Kommentare sehr geschätzt werden!Das Hintergrundbild wird vergrößert, wenn das Hamburgermenü angeklickt wurde. Saf
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()">☰</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>
Können Sie versuchen, eine 'Breite: 100%' auf dem 'ul.topnav'? – PumpkinSeed
Hallo scheint wie das Problem mit mobilen IOS ist mit der bg Anhang behoben, bitte versuchen Sie mit den Lösungen auf dieser Antwort zur Verfügung gestellt http://StackOverflow.com/a/21456799/2887133 – DaniP