背景画像が表示されない

Question

背景画像が全く表示されず、デバッグできません。 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のライブラリを気にしないでください。

Answer 1

適切な背景パスを設定していないようです。私はオンライン絶対パスを使用し、それは正常に動作しています。

.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

Answer 2

がパスをチェックしてくださいすることができます。
パスがtrueの場合は、background-size:cover .itがtrueになることがあります。