column image behave as background image - html

Question

I have two columns using flexbox but does not have to use flexbox. just using it at the moment but am open to other options. The left side is content with a width of 450px and the right column I have an image that needs to behave as a background image but not use css background property. Is there a way to set the image size / image column and have it overflow out of containers and not push the left column content?
setting container widths and using relative positioning but not scaling or behaving as I would like
.row--flex {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
margin: 0;
}
.content-col--450 {
max-width: 450px;
}
.content-col {
margin-bottom: auto;
margin-top: 97px;
padding-bottom: 20px;
}
.image-col {
padding-left: 10px;
}
}
.image {
width: 100%;
height: auto;
}
<div class="container container--outer">
<div class="row--flex">
<!--content-->
<div class="content-col content-col--450">
<div class="title-row">
<h2>
testing h2
</h2>
</div>
<div class="content-row">
<p class="p-margin-bottom">
testing P
</p>
<p class="lead">
download test
</p>
<button class="button--arrow">
<span class="button--text">download now</span>
</button>
</div>
</div>
<!--end content-->
<!--image-->
<div class="image-col">
<img src="/img/right-image.png" alt="right column image" class="image-test">
</div>
<!--end image-->
</div>
column 450 stay in place and image overflow out of containers and behave as BG image

Answer 1

You need something like this?
.row--flex {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
margin: 0;
}
.content-col--450 {
/* max-width: 450px; */
flex-basis: 450px;
}
.content-col {
margin-bottom: auto;
margin-top: 97px;
padding-bottom: 20px;
}
.image-col {
position: relative;
flex-basis: 450px;
align-self: stretch;
padding-left: 10px;
}
.image-test {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.image {
width: 100%;
height: auto;
}
<div class="container container--outer">
<div class="row--flex">
<div class="content-col content-col--450">
<div class="title-row">
<h2>
testing h2
</h2>
</div>
<div class="content-row">
<p class="p-margin-bottom">
testing P
</p>
<p class="lead">
download test
</p>
<button class="button--arrow">
<span class="button--text">download now</span>
</button>
</div>
</div>
<div class="image-col">
<img class="image-test" src="https://picsum.photos/536/354" alt="right column image">
</div>
</div>
</div>