如何将背景图像设置为仅屏幕的左半部分

Question

My goal is to create a page where there's an image on the left-hand side of the screen and a white text area on the right. If the text area is too long for the screen, only that area should scroll. I've been researching this for a bit and can't find any examples on how to do so.

I tried a few different things with CSS grid which doesn't seem to work well: https://codepen.io/aysong/pen/JjXoebx?editors=1100

The issue with this seems to be that the height of the column is dependent on the

p class=item2

I also tried just using CSS and fiddling with background-size. But without setting the height (ex below), the image doesn't appear.

height:1000px;

https://codepen.io/aysong/pen/poyvQEW

I'm using this site as inspiration where you can see there's an image on the left and text on the right. If there were enough text on the right, I would only want that side to scroll and keep the left side as is, which I know is doable with the below code, I just haven't gotten the background image working yet.

overflow: auto;

Answer 1

Here is a method using CSS Flexbox: https://codepen.io/xenvi/pen/JjXoeWz

What I did was make the background box and the text box separate divs and wrapped them both in a parent container. Adding 'display: flex' to the parent container automatically wraps children in a row format (so our 2 divs will now be next to each other). I also defined the height on the parent div to cover the full screen with '100vh'.

For the children, to make each box take up half the page, I added "flex: 1" to both divs. This means that both children will take up the full width of the parent container equally, or 50%. You can look up more about flexbox classes for reference.

Finally, add overflow: auto to your text div so only the text box will scroll if there is an overflow of content.

 body { box-sizing: border-box; padding: 0; margin: 0; }.container { display: flex; height: 100vh; }.bg-image { /* The image used */ background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(11).jpg"); /* Center and scale the image nicely */ background-repeat: no-repeat; background-position: left top; background-size: 100% 100%; flex: 1; height: 100%; }.content { flex: 1; height: 100%; overflow: auto; }

 <section class="container"> <div class="bg-image"> </div> <div class="content"> <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p> <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p> <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p> <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p> <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p> <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p> <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p> <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p> </div> </section>