Is there a way to split the page vertically, with a background image on one side and text on the other? I've been struggling to achieve this layout - the background image won't stay on the left while the text remains on the right. Can someone offer some guidance or solutions?
jsfiddle - https://jsfiddle.net/egLf2b9p/
#half-text-half-image {
display : flex;
align-items : center;
}
.half-width-img, .half-width-text {
width: 50%;
}
.half-width-text {
padding: 0 0px;
text-align: justify;
}
.half-width-img {
width:50%;
min-height:100%;
position:fixed;
height:auto;
background-repeat: no-repeat;
background-size: cover;
}<div id="half-text-half-image">
<div class="half-width-img" style="background-image: url('http://www.arfhamptons.org/wp-content/gallery/garden-tour-2016/IMG_2680.jpg');"></div>
<div class="half-width-text">
(Your text content goes here)
</div>
</div>