Sonu Sonu - 6 months ago 20
HTML Question

Image is too big for jumbotron

It's my first post and I'm trying to fix my CSS. I have a .jumbotron (Bootstrap) and my image is too big. Re-sizing it won't work as people have different sized screens. Here's the code.



.jumbotron {
background-image: url('SONUBANNER.png');
height: 500px;
width: auto;
margin-top: 5rem;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section class="jumbotron">
<div class="container">
</div>
</section>
</body>
</html>





I tried having the the min-width: CSS selector, but that had the same affect. I do not want to have my viewers scroll to see the rest of the .jumbotron. Can anyone show me the fix?

Answer

/* Latest compiled and minified CSS included as External Resource*/
dna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.jumbotron {
  height: 500px;
  display: flex;
  align-items: center;
  background: url("SONUBANNER.png") center center;
  background-size: cover;
  margin-top: 5rem;
}
 <div class="jumbotron">
    
</div>

Comments