Bootstrap 3 : Changing Jumbotron height causes background image not to be centred on resizing

Question

I have a jumbotron

<div class="jumbotron" id="intro">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
      </div>
</div>

with the following css

#intro
{
    background: url('../images/bg.jpg') no-repeat center center;
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.jumbotron
{
    min-height: 400px;
}

But when I resize the window, the image is not resized and centred. However, if I remove

.jumbotron
    {
        min-height: 400px;
    }

image is resized and centred properly.

Answer 1

Hey this link I have referred earlier for the same kind of problem. To centre the image in jumbotron.

Answer 2

Please change #intro id background size to 100% instead of background size cover please check below example I used background-size:100% 100%;

 #intro { background: url('https://www.w3schools.com/w3images/lights.jpg') no-repeat center center; background-size:100% 100%; } .jumbotron { min-height: 400px; }

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="jumbotron" id="intro"> <div class="container"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div>