Bootstrap Jumbotron Background Image Not Setting in style.css - html

Question

I am not able set the jumbotron background image from my external stylesheet file, although the styling works inline.
The stylesheet link can be found between the head tags and after the bootstrap link. I've been working on this a couple days with no success, can this be accomplished?
Here is what I have so far:
CSS:
.jumbotron {
background: url('img/rocket.png');
background-repeat:no-repeat;
background-color: #28b8f7;
color: #fff;
border-top: 1px solid #005D85;
border-bottom: 1px solid #005D85;
}
Here's the HTML:
<!-- Jumbotron & Call to Action -->
<div class="jumbotron">
<div class="container">
<h1 class="text-right"></h1>
<div class="col-sm-6 col-sm-offset-6">
<p class="pull-right"><br />
<a class="btn btn-default btn-lg pull-right jumbut" href="#signUpModal" role="button" data-toggle="modal"></a></p>
</div>
</div>
</div>
Although, this code seems to work as compared what I have already tried:
<!-- Jumbotron & Call to Action -->
<div class="jumbotron" style="background: url('img/rocket.png');background-repeat:no-repeat;background-color:#28b8f7;">
<div class="container">
<h1 class="text-right"></h1>
<div class="col-sm-6 col-sm-offset-6">
<p class="pull-right"><br />
<a class="btn btn-default btn-lg pull-right jumbut" href="#signUpModal" role="button" data-toggle="modal"></a></p>
</div>
</div>
</div>

Answer 1

From the looks of your last comment, it is simply a case of your url being wrong for the location you are currently in. From what I gather, this is your basic structure
-index.html
-css (folder)
--style.css
-img (folder)
--rocket.png
You have defined in your style.css the following property
background: url('img/rocket.png');
Since your css is in a folder called 'css' under root, when the browser looks at your url it will resolve it relative to its current location, so it will end up requesting http://yourgreatsite.com/css/img/rocket.png. This is why it worked when you put it directly in your html, since it was resolving the url relative to its currently location, which was the root, so it ended up requesting http://yourgreatsite.com/img/rocket.png.
It's very simple to solve, use dots to tell the browser to navigate 'up' out of your css folder and then into your image folder.
background: url('../img/rocket.png');
This would have been really obvious if you used your browsers built in developer tools. Most modern browsers have some Developer tools or 'Inspectors' available. Open one of these and you'll generally find a panel called 'Net' or 'Network' or 'Requests'. This will list every request your web page is making, internally or externally, and highlight any that have gone wrong. In this case it would have shown the request for your background image returning a '404 file not found' and showed you the url it was attempting to use. Learn to use the developer tools, they'll make your life a lot easier!