Why isn't background image showing up in Jumbotron (Bootstrap)?

Question

No matter how many times I've changed my folder and file names, made sure they are relative paths, etc., I can't seem to have my background image appear in my Jumbotron.

I just want it to show up behind in my Jumbotron DIV, but it's not.

Here's my 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>

Here's my 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;
}

Answer 1

Change and condense your CSS from background-image to just background to keep things nice and clean.

eg background: url(/images/blue.jpg) cover no-repeat;

The code itself looks functional though. Is image in the same directory? Perhaps reviewing this post will help: Links not going back a directory?

Answer 2

Check the permissions on the folder where the images are being stored. Your code is correct, check this working fiddle with an external image url working perfectly:

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

Why isn't background image showing up in Jumbotron (Bootstrap)?

Question

2 answers

solution1
0 2016-03-19 08:13:40

solution2
0 2016-03-19 09:05:28

Why isn't background image showing up in Jumbotron (Bootstrap)?

Question

2 answers

solution1 0 2016-03-19 08:13:40

solution2 0 2016-03-19 09:05:28

solution1
0 2016-03-19 08:13:40

solution2
0 2016-03-19 09:05:28