I'm making a website which has a jumbotron on the home page, I want to resize the height of the image in the jumbotron but display it completely without cutting of any of the picture. I don't want it to scroll to display it either.

```
{% extends "base.html" %}

{% block style %}
.img{
    height: 750px;
}

{% endblock %}

{% block body %}

<div class="jumbotron jumbotron-fluid img" style="margin-left: 0%; margin-right: 0%; background-image: url('static/Background.jpg'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <h1 class="display-3" style="font-weight: 500">S</h1>
    <p class="lead">This is the about me area </p>
  </div>
</div>
{% endblock %}

```