1
私は自分のヘッダの背後に背景画像を表示しようとしています。しかし何らかの理由で画像が表示されません。私はかなり新しいHTMLとCSSですが、他の機会に表示する背景イメージを持っています。私は何かを逃しているのですか、私はいくつかの行を変更する必要がありますかどんな助けもありがとう、ありがとう！ここバックグラウンドが表示されない背景
は私のhtmlコードです：
<html>
<body>
<header>
<div class="logo">
<h1>My logo</h1>
</div>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<section class="home-main">
<div class="container">
<h1>This is foo</h1>
</div>
</section>
</body>
</html>
、ここでは私のCSSです：background-imageにbackground-imgプロパティを変更する必要があるhome-main
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
}
.clearfix::after,
section::after {
content: '';
display:block;
clear:both;
}
/* typography
================= */
.unstyled-list {
margin: 0;
padding: 0;
list-style-type: none;
}
/* header
================= */
header {
position: absolute;
left: 0;
right: 0;
margin: 1em;
}
.logo {
font-size: 1em;
margin-left: 1em;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
padding: 0.125em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: .8rem;
padding: .75em;
}
@media(min-width:40rem) {
.logo {
float: left;
}
nav {
float: right;
margin-top: 1em;
}
}
@media(min-width:60rem) {
.logo {
font-size: 1.3em;
margin-top: -.5em;
}
nav {
margin-top: 1em;
}
nav a {
font-size: 1.04em;
}
}
/* home-main
================= */
.home-main {
background-img: url('../manjitcss/img/manjit-main.png');
background-size: cover;
background-position: center;
padding: 10em 0;
}
があります：あなたは、 "背景画像" を使用する必要がありますか？ – cwanjt
@cwanjtが書いているように、404エラーをチェックする必要があります。画像へのパスは正しいですか？それ以外の場合は必ず表示されません。 –
エラーはありません。私は別のプロジェクトにその画像を表示しているので、パスの動作を知っています – ankit