I want to achieve the effect of having a picture of a Pen positioned behind the text "Create" on the left side. It looks good at full size, but the positioning gets messed up when the screen size is adjusted. How can I make it responsive so that the image stays behind the text even when the screen size changes? For reference, I'd like it to look like this Example website where the image is positioned behind the text.
#home_nav {
background-color: #5680E9;
}
a{
color:#ffffff;
}
.btn{color:#ffffff;}
.img-fluid {
max-width: 80%;
max-height: 80%;
}
.text-right {
position: absolute;
bottom: 0px;
right: 16px;
} <!--Where the buttons are located-->
<div class="container-fluid" id="home_nav">
<div class="row">
<div class="col">
<div style="position:relative;">
<img src="/STEMuli_Website/img/pen.png" alt="Pen" style="width:40%;position:absolute; left:-20px; bottom:-100px"></img></div>
<button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal"><div class="display-2 home_text text-right ">Create</div></button>
</div>
<div class="col">
<div class="display-2 home_text"><a href="/STEMuli_Website/HTML_Pages/Explore.html">Explore</a></div>
</div>
<div class="display-2 home_text"><a href="#">Your Library</a></div>
</div>
<!--RSS feed here-->
<div class="col-8">
<div class="feedgrabbr_widget" id="fgid_15f3fc7e5ddb0c39637a55949"></div>
<script>
if (typeof(fg_widgets) === "undefined") fg_widgets = new Array();
fg_widgets.push("fgid_15f3fc7e5ddb0c39637a55949");
</script>
<script async src="https://www.feedgrabbr.com/widget/fgwidget.js"></script>
</div>
</div>