Fixed image next to scrolling text column - html

Question

I'm trying to achieve the following with two adjacent HTML boxes:
The text in the right box should be 300 px wide and always stick to the right.
The left box should fill out the rest of the browser width (ie. support window resizing).
The image should be centred horizontally in the left box.
The image should scale automatically to fill the entire browser height.
The image position should be fixed, ie. not scroll when scrolling down the page.
However, with the current version I have to manually specify height/width for the image box (augh!), and the text jumps around when I change the browser width. I'm just not good at this.
What is the simplest, most straight forward way to achieve the desired result?
<style>
body {
margin: 0;
}
.left {
float: left;
width: 700px; /* BAD */
height: 700px; /* BAD */
background-image: url("image.jpg");
background-attachment: fixed;
background-position: center top;
}
.right {
float: right;
width: 300px;
padding: 0 8px 0 8px;
}
</style>
<div class="wrapper">
<div class="left"></div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

Answer 1

To have the image on the left fixed you need to have the container fixed to the window so add position:fixed;. Then just use coordinates from all the sides to make it fill the left side but leave 300px on the right - left: 0, top: 0, bottom: 0, right: 300px. For the image to fill the container add background-size. You can use either cover to fill the height and width of the container always or just "auto 100%" to always have it 100% height of the container. I added box-sizing:border-box to your right side element so that it would not multiply the 300px width and the padding so that the total becomes more than 300px and collides with the left side.
.left {
position: fixed;
right: 300px;
top: 0;
bottom: 0;
left: 0;
background-image: url("//placehold.it/1000x1000");
background-position: center;
background-size: cover;
}
.right {
float: right;
width: 300px;
padding: 0 8px 0 8px;
box-sizing:border-box;
}
I created a fiddle for an example: https://jsfiddle.net/7v18eyL2/8/