I'm currently working on a template design that includes a column on the left side with an image as the background. Within this image, I need to place form inputs, which could vary in quantity depending on the requirements.
The issue I'm facing is that the size of the background image adjusts based on the number of lines of content provided.
How can I ensure that the column is filled with the image without it overflowing the column border?
Here's the current structure I have:
<style>
.image-left{
background-image: url('some_url.jpg');
}
</style>
<div class="container-fluid">
<div class="row content">
<div class="col-md-7 sidenav text-left image-left img-fluid">
<p>adasda sdasdasdasdasd ddddddd </p>
<p>Test line</p>
<p>Test line</p>
<p>Test line</p>
<p>Test line</p>
<p>Test line</p>
<p>Test line</p>
<p>Test line</p>
<p>Test line</p>
<p>Test line</p>
</div>
<div class="col-md-5 sidenav">
<p>Test line</p>
</div>
</div>