CODEWITHSUNDEEP
csstwitter-bootstrapimagebackground
Mona Jalal
Mona Jalal

Reputation: 38195

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

Upvotes: 0

Views: 1318

Answers (3)

matthew
matthew

Reputation: 19

You could try this : change your CSS properties from background to background-image.

e.g. background-image: url("/assets/img/mhacks.jpg" ) cover no-repeat;

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39332

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 -

Upvotes: 1

Saika
Saika

Reputation: 396

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

Upvotes: 1

Related Questions