Hintergrundbild wird nicht auf nur einer mobilen Seite angezeigt

Das Hintergrundbild funktioniert auf allen Seiten meiner Website auf dem Desktop und alle außer einem auf dem Handy. Ich versuche herauszufinden, warum es nicht auf nur einer meiner mobilen Seiten angezeigt wird.Hintergrundbild wird nicht auf nur einer mobilen Seite angezeigt

Hier ist der HTML-Code für die Seite, dass es nicht auf funktioniert:

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="Assets/Css/MPW.css"> 
</head> 

<body class="pageContainer"> 
<header class="headerContent"> 
    <nav> 
     <ul> 
      <li class="navBarLeft">Website Name</li> 
      <a class="navBarRight" href="contact.html"> 
       <li>Contact</li> 
      </a> 
      <a class="navBarRightCurrent" href="index.html"> 
       <li>Home</li> 
      </a> 
     </ul> 
     <div id="headings"> 
      <h1 id="nameHeader">title</h1> 
      <br> 
      <h2 id="typeItH2"></h2> 
     </div> 
     <a id="readCv" href="#readCvJump">Read CV</a> 
    </nav> 
</header> 

<div id="mainContent"> 
    <h3>CV</h3> 
    <div class="cvSection"> 
     <h4 id="cvSectionHeadingFirst">Academic History</h4> 
     .... 
     ....

hier Dann wird der HTML-Code für die Seite ist, das funktioniert:

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="Assets/Css/MPW.css"> 
</head> 

<body class="pageContainer"> 
<header> 
    <div class="headerContent"> 
     <nav> 
      <ul> 
       <a class="navBarRightCurrent" href="contact.html"> 
        <li>Contact</li> 
       </a> 
       <a class="navBarRight" href="index.html"> 
        <li>Home</li> 
       </a> 
      </ul> 
     </nav> 
    </div> 
</header> 

<div id="contactForm"> 
    <h4 id="contactHeading">Contact Us</h4> 
    ... 
    ...

Hier ist die CSS:

@-webkit-keyframes fadeInUp { 
from { 
    opacity: 0; 
} 
to { 
    opacity: 1; 
}

}

@keyframes fadeInUp { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
} 

nav { 
    width: 100%; 
    padding-bottom: 15px; 
} 

nav li { 
    display: inline; 
    margin-right: 15px; 
} 

footer { 
    background-color: rgb(44, 44, 44); 
    height: 70px; 
    padding: 65px 15% 40px 15%; 
} 

.headerContent { 
    background-color: white; 
    background: url(../Images/mainPhoto.jpg) no-repeat center center fixed; 
    @media only screen and (min-width: 320px) and (max-width: 480px) { 
     background: url(../Images/mainPhotoSmall.jpg) no-repeat center center fixed; 
    } 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100vh; 
    padding: 40px 10% 40px 10%; 
} 

#readCv { 
    margin-left: 44%; 
    padding: 12px 23px; 
    display: block; 
    background-color: rgb(246, 246, 244); 
    color: rgb(159, 83, 59); 
    border-color: rgb(159, 83, 59); 
    border: 2px solid; 
    width: 70px; 
    text-align: center; 
} 

#readCv:hover { 
    border-color: rgb(54, 53, 48); 
    color: rgb(54, 53, 48); 
} 

#headings { 
    text-align: center; 
    display: block; 
    padding-top: 30vh; 
    width: 450px; 
    height: 100px; 
    margin: 0 auto; 
} 

#nameHeader { 
    animation: fadeInUp 1.3s ease-in-out; 
    display: inline-block; 
    margin: 0px 10px; 
    background: rgba(246, 246, 244, .4); 
    border-radius: 8px; 
} 

#mainContent { 
    background-color: rgb(247, 247, 247); 
    width: 100%; 
    padding: 40px 15% 60px 15%; 
    box-sizing: border-box; 
} 

.pageContainer { 
    min-width: 700px; 
    min-height: 100vh; 
} 

#contactForm { 
    position: absolute; 
    display: block; 
    top: 120px; 
    margin: 0px 25% 20px 25%; 
    width: 450px; 
    padding: 50px 80px; 
    background-color: rgb(247, 247, 247); 
    border-radius: 6px; 
} 

#contactHeading { 
    font-size: 2em; 
    font-family: 'AlgreyaSans-Regular', 'Helvetica'; 
    animation: fadeInUp 1.3s ease-in-out; 
    -webkit-animation: fadeInUp 1.3s ease-in-out; 
}

Was ich versucht habe:

ein viel kleineres Bild für mobile Geräte geladen werden.
Vergleichen Sie die beiden Header, um sie so ähnlich wie möglich zu machen.
Inhalt aus der Kopfzeile entfernen, um zu sehen, ob etwas davon das Hintergrundbild beeinflusst.

Quelle

2017-01-17 JL9

Der Unterschied ist der <header Tag im Vergleich zu der im Lieferumfang enthaltenen div

Version 1: <header class="headerContent">

Version 2: <div class="headerContent">, mit dem <header> Tag vor diesen

dh, dass CSS-Klasse zugewiesen ist zwei verschiedene Elemente

Quelle

2017-01-17 00:35:58 Johannes

Es macht keinen Unterschied, ob die Klasse auf der Kopfzeile oder div ist, in f handle es war ursprünglich auf der div aber dann habe ich versucht, es in den Header zu verschieben, um zu sehen, ob das funktionieren würde. – JL9

Hintergrundbild wird nicht auf nur einer mobilen Seite angezeigt

Antwort

Verwandte Themen