为什么我的背景图片不显示？

我在这里读到另一个答案并修复它（所以我想），但它仍然不会出现。我知道图像是background.jpg，它在img文件夹中。我真的很困惑，为什么这不起作用。它可能是引导它搞砸了吗？我假设没有，因为我的自定义CSS是在引导CSS后。为什么我的背景图片不显示？

.main-section { 
 
    background-image: url(../img/background.jpg); 
 
}

<div class="container-fluid"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">BFG</a> 
 
     </div> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a> 
 
     </div> 
 
     <ul class=" nav navbar-nav"> 
 
     <li><a href="#">Hours</a></li> 
 
     <li><a href="#">Gifts</a></li> 
 
     <li><a href="#">Flowers</a></li> 
 
     <li><a href="#">Balloons</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</div> 
 
<div class="container-fluid"> 
 
    <div class="jumbotron main-section"> 
 
    <div class="row"> 
 
     <div class="col-md-12 text-center"> 
 
     <h1>Balloons Flowers and Gifts</h1> 
 
     <h3>The perfect way to brighten someone's day, and make them smile!</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Balloons</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Flowers</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Gifts</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Hours</h2></a> 
 
    </div> 
 
    </div>

来源

2016-11-21 Austin Melms

你可以检查控制台，看看背景图像是否没有抛出任何错误，如文件未找到？ –

@praveenKumar没有错误。 –

这是你的imgfile，我只是改变你的火狐图标的网址，它的工作原理。 chech如果文件存在或权限允许，路径。

.main-section { 
 
    background-image: url(http://newtab.firefoxchina.cn/img/worldindex/logo.png); 
 
}

<div class="container-fluid"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">BFG</a> 
 
     </div> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a> 
 
     </div> 
 
     <ul class=" nav navbar-nav"> 
 
     <li><a href="#">Hours</a></li> 
 
     <li><a href="#">Gifts</a></li> 
 
     <li><a href="#">Flowers</a></li> 
 
     <li><a href="#">Balloons</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</div> 
 
<div class="container-fluid"> 
 
    <div class="jumbotron main-section"> 
 
    <div class="row"> 
 
     <div class="col-md-12 text-center"> 
 
     <h1>Balloons Flowers and Gifts</h1> 
 
     <h3>The perfect way to brighten someone's day, and make them smile!</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Balloons</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Flowers</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Gifts</h2></a> 
 
    </div> 
 
    <div class="col-md-3 text-center"> 
 
     <a href="#"><h2>Hours</h2></a> 
 
    </div> 
 
    </div>

来源

2016-11-21 01:26:51

我把相同的CSS放在身体选择器下，图像出现了。它必须与主要部分有关。我不知道它可能是什么。 –

@AustinMelms你有没有其他的风格，如果是的话，你可能会被抄袭。 –

我在CSS中有其他样式的工作，就是这样。 –

尝试增加背景尺寸：盖;在你的背景之后。请确保你指定的宽度为&高度也为该部分，你应该很好希望帮助:)

来源

2016-11-21 01:27:09 Allan

我试过了，我把相同的CSS放在身体选择器下，图像出现了。它必须与主要部分有关。我不知道它可能是什么。 –

为什么我的背景图片不显示？

回答

相关问题