jumbotron background image doesn't show

Question

I want to show the image in the background but it doesn't show:

<div class="jumbotron jumbotron-fluid background: url('/assets/img/mhacks.jpg') no-repeat center center;">
    <div class="container text-sm-center p-t-3">

        <h1 class="display-2">Mona Jalal</h1>
        <p class="lead">Under construction</p>
    </div>
</div>

What I see is:

P.S.: In general how can I debug such faults? Here's my jsfiddle: https://jsfiddle.net/e5qsnjdo/

With the following code:

<div class="jumbotron jumbotron-fluid style="background-image: url('/assets/img/mhacks.jpg') no-repeat center center;">
    <div class="container text-sm-center p-t-3">

        <h1 class="display-2">Mona Jalal</h1>
        <p class="lead">Under construction</p>
    </div>
</div>

I get these errors:

Answer 1

Move your background property to style attribute:

<div class="jumbotron jumbotron-fluid" style="background: url('/assets/img/mhacks.jpg') no-repeat center center;">

Or define in css as follows:

.jumbotron {
    background: url('./assets/img/mhacks.jpg') no-repeat center center;
}

// notice the . before /assets if you don't use the . it will give the 404 error -

Answer 2

<div class="jumbotron jumbotron-fluid" style=" background: url('/assets/img/mhacks.jpg') no-repeat center center;">
    <div class="container text-sm-center p-t-3">

        <h1 class="display-2">Mona Jalal</h1>
        <p class="lead">Under construction</p>
    </div>
</div>