I'm attempting to change the background image of this container, but when I add margin-top to the card element, it shifts everything over the picture. Below is my Bootstrap4 code:
#card.container-fluid {
background-image: url("../images/picture2.jpg");
background-position: 12em;
background-size: cover;
margin-bottom: 20px;
}<div class="jumbotron jumbotron-billboard">
<div class="img"></div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>title</h1>
<div>
<a>link</a>
<a>lnk</a>
<a>link</a>
<a>link</a>
<a>link</a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="card">
<div class="card" style="width: 50%">
<div class="card-body" id="bod">
<h4 class="card-title">title</h4>
<p class="card-text" style="text-align: justify;">
text text tex
</p>
</div>
<img class="card-img-bottom" src="image1.jpg" alt="Card image" style="width:100%">
</div>
</div>I've experimented with adding margin-top to .card and #bod.card, but it keeps affecting the position of the image too. Any assistance would be greatly appreciated!