Austin Melms Austin Melms - 14 days ago 3
CSS Question

Why isn't my background image showing?

I read another answer on here and fixed it (So I thought) but it still wont show up. I KNOW the image is background.jpg and it is in the img folder. I honestly am so confused why this isn't working. Could it be bootstrap messing with it? I assume not, because my custom CSS is after the bootstrap 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>




Answer

It's your imgfile, I just change your url of the firefox icon,it works. chech if the file exist or right permission, and path.

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

Comments