Just background:
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image") repeat center; width: 100%; z-index: -1;'>.</div>
Cover top info but not sidebar:
<div style="position: absolute; top: 0px; bottom: 0px; left: 0px; background-color: #000000; width: 100%;">
<div class="p-3" style='background-color: #000000; background-image: url("image");repeat center; background-position:center;'>
Add content here
</div>
</div>
Cover full screen:
<div class="fixed-bottom p-2" style="absolute;top:0px;bottom:0px;left:0px;">
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("image") repeat center; width: 100%; z-index: -1;'>
<div class="card-transparent" style="height:820px;overflow-y:auto;overflow-x:hidden;scrollbar-width: none;"><br><br><br>
Add content here
</div>
</div>
</div>
Cover bulletins / comments:
<div style="margin-left: -20px; margin-right: -20px; margin-top: -20px; margin-bottom: -47px;">
<div class="p-3" style='background: url("image"); background-attachment: fixed;width: 100%;background-position:center; border-radius: 3px;'>
Add content here
</div>
</div>
Cover the background behind them:
<div class="card rounded-0 border-0 col-lg-10 offset-lg-2 col-md-9 offset-md-3 p-0" style='overflow:hidden; position:fixed; bottom:0; top:0; left:0; background-image: url("image"); z-index: -1;'>.</div>