Question

我的背景图片根本没有显示，我无法调试它。我试着将它变成ID，类等等，但没有任何作用。有什么我显然没有看到的吗？

HTML code：

<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

看来，您还没有设置正确的背景路径。我使用在线绝对路径，它工作正常。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

您可以看到codepen link here

Answer 2

检查你的路径如果path为true，请设置background-size:cover。这可能是真的。

背景img没有显示

2 个答案: