Mona Jalal Mona Jalal - 5 months ago 10
CSS Question

jumbotron background image doesn't show

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:
enter image description here

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:
enter image description here
enter image description here
enter image description here

Answer

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 -