Sonu Sonu - 2 years ago 156
HTML Question

Bootstrap CSS .jumbotron cutoff

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>
<section class="jumbotron">
<div class="container">

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 Source

/* Latest compiled and minified CSS included as External Resource*/');

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download