3
バックグラウンド画像は、デスクトップ上のすべてのウェブサイトのページとモバイル上の1つ以外のすべてのページで機能します。私は自分のモバイルページの1つに表示されない理由を理解しようとしています。ここで1つのモバイルページだけに背景画像が表示されない
は、それが動作しないことをページのHTMLです：
<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>
....
....
は次にここに仕事をするページのHTMLです：
<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>
...
...
はここに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;
}
私が試したもの：
- モバイルデバイス用にはるかに小さい画像をロードします。
- 2つのヘッダーを比較して、できるだけ似ているようにしました。
- ヘッダーからコンテンツを取り出し、そのコンテンツが背景画像に影響しているかどうかを確認します。そのCSSクラスが割り当てられている。すなわち
<div class="headerContent">、<header>タグとその前：
<header class="headerContent">バージョン2：
クラスがヘッダーかdivのどちらにあるかはfそれは元々はdivにありましたが、ヘッダーに移動してそれが機能するかどうかを確認しようとしました。 – JL9