Adjusting bootstrap jumbotron background image to avoid collision with text - css

Question

I have a jumbotron with background image and text. I need to have the image adjust so that the text does not collide with any part of the background image.
HTML:
<div class="jumbotron">
<div class="container">
<h1>Header title text</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
</div>
</div>
CSS:
.jumbotron {
position: relative;
background: #fff url("https://s3.us-east-2.amazonaws.com/ftp-assets/family.png") center center;
width: 100%;
height: 400px;
background-size: cover;
}
h1 {
margin-top: -30px;
margin-left: -20px;
}
p {
margin-left: -2%;
}
JSFIDDLE:https://jsfiddle.net/2ek2e2rf/

Answer 1

Try converting to something like this:
<div class="jumbotron jumbotron-fluid bg-dark">
<div class="jumbotron-background">
<img src="assets/background_img4.jpg" class="blur ">
</div>
<div class="container text-white" style="background-color: transparent; border: none;">
<h1>Some text</h1>
</div>
</div>
Then, you can adjust the background by changing the following properties:
.jumbotron-background {
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
}