배경이 표시되지 않음

내 배경 이미지가 전혀 표시되지 않고 디버깅 할 수 없습니다. ID, 클래스 등으로 바꾸려고했지만 아무 것도 작동하지 않습니다. 내가 분명히 보지 못하는 것이 있습니까?배경이 표시되지 않음

HTML 코드 :

<title>Temple-Digital Designer</title> 

<!--This links my bootstrap css file --> 

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> 

<!--This links my stylesheet from the css folder in portfolio--> 

<link rel="stylesheet" type="text/css" href="./css/style.css"> 

<!--This links my jQuery file--> 

<script type="text/javascript" src="./scripts/jquery-3.1.1.min.js"></script>

<div class="container-fluid header-section"> 

</div> 



<div class="container-fluid what-i-do"> 

</div> 



<div class="container-fluid about-me"> 

</div> 



<div class="container-fluid contact-me"> 

</div> 



<div class="container-fluid footer-section"> 

</div> 




<!--Defines my javascript file(local made one) --> 
<script type="text/javascript" src="./scripts/helper.js"></script> 
</body>

내 CSS 코드 :

.header-section { 

    background-image: url('../img/pineapple.jpg'); 

    width: 100%; 

    height: 400px; 

    background-repeat: no-repeat; 

    background-size: contain; 

}

내가 부트 스트랩으로 나중에 사용에 계획하고 있었다, JQuery와 라이브러리를 신경 쓰지 마십시오.

출처

2016-10-14 Temple Naylor

적절한 배경 경로를 설정하지 않은 것처럼 보입니다. 온라인 절대 경로를 사용했는데 정상적으로 작동합니다.

.header-section { 
 
background-image:url('http://freedesignfile.com/upload/2014/07/Shiny-eco-style-green-background-vector-01.jpg'); 
 

 
width: 100%; 
 

 
height: 400px; 
 

 
background-repeat: no-repeat; 
 

 
background-size: contain; 
 
}

<title>Temple-Digital Designer</title> 
 

 
<!--This links my bootstrap css file --> 
 

 
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> 
 

 
<!--This links my stylesheet from the css folder in portfolio--> 
 

 
<link rel="stylesheet" type="text/css" href="./css/style.css"> 
 

 
<!--This links my jQuery file--> 
 

 
<script type="text/javascript" src="./scripts/jquery-3.1.1.min.js"></script> 
 

 

 
<div class="container-fluid header-section"> 
 

 
</div> 
 

 

 

 
<div class="container-fluid what-i-do"> 
 

 
</div> 
 

 

 

 
<div class="container-fluid about-me"> 
 

 
</div> 
 

 

 

 
<div class="container-fluid contact-me"> 
 

 
</div> 
 

 

 

 
<div class="container-fluid footer-section"> 
 

 
</div> 
 

 

 

 

 
<!--Defines my javascript file(local made one) --> 
 
<script type="text/javascript" src="./scripts/helper.js"></script> 
 
</body>

당신은 codepen link here

출처

2016-10-14 07:39:46