How can I make the background of div2 cover the image in div1 when setting margin-top=-50px?
Code snippet:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img src="https://pbs.twimg.com/profile_images/795971591511347200/BE9ga9uY_400x400.jpg">
</div>
</div>
</div>
<div class="container-fluid" style="margin-top: -50px; background: red">
<div class="row">
<div class="col-md-12">
<div>
Here is some text with a red background that should cover the image underneath it.
</div>
</div>
</div>
</div>
</body>
</html>