引导程序：屏幕调整大小后，巨型机类中的背景图像无响应

Question

I am using bootstrap for the first time in a tribute page and I am having trouble with the responsiveness of the background image in the jumbotron class. When I resize the screen, only half of the image shows and you have to scroll horizontally to see the whole image. Is there a way to make it automatically adjust and fit entirely within the window.

I've tried using the answers found in this thread (where the image tiles and repeats): Responsive Bootstrap Jumbotron Background Image but they did not work out since the problem is not the same.

HTML code:

<div id="jumbotron1" class="jumbotron">
   <!-- title text -->
   <div id="title-container" class="container rounded">
       <h1 id="title-text" class="text-center">Hattie McDaniel</h1>
   </div>
</div>

CSS code:

#jumbotron1{
    background-image: 
url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
   background-size: cover; 
   height: 580px;
   padding: 0px;
   margin-bottom: 0px;
   background-repeat: no-repeat;
}

I know that if I am not using the jumbotron class, I can easily add an image element with the class "img-fluid" and that's it. How can I do that in this case?

Thanks in advance!

Answer 1

You can try setting the background position to center, like this:

#jumbotron1{
background-position:center center;
}

Answer 2

Hi please add below styles to your style sheets.

    #jumbotron1{
    background-image: 
    url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
    background-size: cover; 
    height: 580px;
    padding: 0px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
  }

  @media (max-width:980px) { 
    #jumbotron1{background-image: 
    url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
    background-size: 100%;
    height: 360px;
    }
  }


  @media (max-width:768px) { 
    #jumbotron1{background-image: 
    url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
    background-size: 100%;
    }
  }

  @media (max-width:550px) { 
    #jumbotron1{background-image: 
    url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
    height: 180px;
    }
  }

We are using media query here

Answer 3

this will resolve your issue

#jumbotron {
background-image: 
  url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
background-size: cover;
height: 100%;}

more on https://stackoverflow.com/a/31147923/7714663

Answer 4

One way to make the entire background image fit would be to use background-size: 100% 100%; This makes it so that the background-image dimensions will always fit. It may look kind of weird as the screen size gets smaller

Add the piece of code like so:

#jumbotron1{
  background-image: 
  url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
  background-size: cover; 
  height: 580px;
  padding: 0px;
  margin-bottom: 0px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

It may be better to just change the background image at certain break points with media queries though because the background-image looks terrible on smaller screen sizes