Фон img не отображается

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

Проверьте путь.
Если путь истинным, то значение background-size:cover .it может быть правдой.