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입니다 :
@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