Блог

Главная - Вопросы по программированию - Фоновое изображение не отображается

Фоновое изображение не отображается

#html #css #class #background #stylesheet

#HTML #css #класс #фон #таблица стилей

Вопрос:

мое фоновое изображение вообще не отображается, и я не могу его отладить. Я попытался превратить его в идентификатор, класс и так далее, но ничего не работает. Есть ли что-то, чего я, очевидно, не вижу?

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, я планировал использовать их позже с bootstrap.

Ответ №1:

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

Ответ №2:

Похоже, вы не установили правильный фоновый путь. Я использовал онлайн-абсолютный путь, и он работает нормально.

 .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 здесь

Метки: