Почему фоновое изображение не появляется в Jumbotron (Bootstrap)?

Независимо от того, сколько раз я изменил имена своих файлов и файлов, убедился, что они относительные пути и т. Д., Я не могу представить, что фоновое изображение появляется в моем Jumbotron.Почему фоновое изображение не появляется в Jumbotron (Bootstrap)?

Я просто хочу, чтобы он появился в моем Jumbotron DIV, но это не так.

Вот мой HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Mock Website</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/style1.css"> 
</head> 
<body> 

    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 

      <!-- LOGO --> 
      <div class="navbar-header"> 
       <!-- BUTTON FOR MENU ITEMS AS IT SHRINKS --> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a href="#" class="navbar-brand">Mock Website</a> 
      </div> 


      <!-- COLLAPSE MENU ITEMS --> 
      <div class="collapse navbar-collapse" id="mainNavBar"> 
       <!-- MENU ITEMS --> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"><a href="#">HOME</a></li> 
        <li><a href="#">ABOUT</a></li> 

        <!-- DROP DOWN MENU --> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">PORTFOLIO <span class="caret"></span</a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">PHOTOS</a></li> 
          <li><a href="#">VIDEOS</a></li> 
          <li><a href="#">MUSIC</a></li> 
         </ul> 
        </li> 
        <li><a href="#">CONTACT</a></li> 
       </ul> 
      </div> 
     </div> <!-- Container Fluid --> 
    </nav> <!-- Nav --> 


<!-- Main component for a primary marketing message or call to action --> 
     <div class="jumbotron"> 
     <div class="container"> 
      <h1>Navbar example</h1> 
      <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs &raquo;</a> 
      </p> 
     </div> <!-- CONTAINER --> 
     </div> <!-- JUMBOTRON --> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

Вот мой CSS:

/* NAVBAR */ 
.navbar { 
    margin-bottom: 0px; 
    border-radius: 0px; 
} 


/* JUMBOTRON */ 
.jumbotron { 
    background-color: ; 
    background-image: url("/images/blue.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    color: #FFF; 
} 

.dropdown li { 
    text-align: right; 
}

источник

2016-03-18 user3385997

Изменение и конденсироваться ваш CSS от background-image просто background, чтобы держать вещи красивым и чистым.

например. background: url(/images/blue.jpg) cover no-repeat;

Сам код выглядит функциональным. Является ли образ в том же каталоге? Возможно, если вы прочитаете этот пост, то: Links not going back a directory?

источник

2016-03-19 08:13:40 seibzehn

Проверьте разрешения на папку, в которой хранятся изображения. Ваш код правильно, проверьте эту рабочую скрипку с внешним изображением URL прекрасно работает:

/* NAVBAR */ 
 
.navbar { 
 
    margin-bottom: 0px; 
 
    border-radius: 0px; 
 
} 
 

 

 
/* JUMBOTRON */ 
 
.jumbotron { 
 
    background-color: ; 
 
    background-image: url("http://vignette2.wikia.nocookie.net/p__/images/0/0c/Superman%27s_classic_pose.png/revision/latest?cb=20131218234907&path-prefix=protagonist"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    color: #FFF; 
 
} 
 

 
.dropdown li { 
 
    text-align: right; 
 
}

<!-- LOGO --> 
 
      <div class="navbar-header"> 
 
       <!-- BUTTON FOR MENU ITEMS AS IT SHRINKS --> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a href="#" class="navbar-brand">Mock Website</a> 
 
      </div> 
 

 

 
      <!-- COLLAPSE MENU ITEMS --> 
 
      <div class="collapse navbar-collapse" id="mainNavBar"> 
 
       <!-- MENU ITEMS --> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li class="active"><a href="#">HOME</a></li> 
 
        <li><a href="#">ABOUT</a></li> 
 

 
        <!-- DROP DOWN MENU --> 
 
        <li class="dropdown"> 
 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">PORTFOLIO <span class="caret"></span</a> 
 
         <ul class="dropdown-menu"> 
 
          <li><a href="#">PHOTOS</a></li> 
 
          <li><a href="#">VIDEOS</a></li> 
 
          <li><a href="#">MUSIC</a></li> 
 
         </ul> 
 
        </li> 
 
        <li><a href="#">CONTACT</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> <!-- Container Fluid --> 
 
    </nav> <!-- Nav --> 
 

 

 
<!-- Main component for a primary marketing message or call to action --> 
 
     <div class="jumbotron"> 
 
     <div class="container"> 
 
      <h1>Navbar example</h1> 
 
      <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs &raquo;</a> 
 
      </p> 
 
     </div> <!-- CONTAINER --> 
 
     </div> <!-- JUMBOTRON --> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

источник

2016-03-19 09:05:28 Dev

Почему фоновое изображение не появляется в Jumbotron (Bootstrap)?

ответ

Смежные вопросы