0

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!

Community
  • 1
  • 1

4 Answers4

0

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

#jumbotron1{
background-position:center center;
}
Chirag Bhansali
  • 1,900
  • 1
  • 15
  • 22
  • I've tried this and it certainly improves the situation, but it crops the top part of the image. Moves the image further upwards. –  May 06 '17 at 07:02
  • Try setting different background-positions for different screen sizes using media queries. Maybe that might help – Chirag Bhansali May 06 '17 at 07:15
0

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

Sharafu Kp
  • 1
  • 1
0

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

Community
  • 1
  • 1
this.girish
  • 1,296
  • 14
  • 17
0

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

Alex
  • 71
  • 5