Half width background image with bootstrap container

user_12160777 0
Viewed 365

I'm trying to create an grid with two columns (col-6 | col-6). But the right column needs to be fluid with an image in it. I tried the following:

Preview

 <div class="container-fluid" style="background-image: url('public/img/example.jpg'); background-size: 50% auto; background-position: center right; background-repeat: no-repeat;">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <h1>Hello</h1>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                </div>
            </div>
        </div>
    </div>

The problem with my solution is that when the content on the left side get's bigger: The image creates some space to stay in ratio. (Space marked with red background: E

I'm not able to make this cover because I'm already using the background-size to set the image to half of screen. So what I'm trying to do is that the image fills/covers the red background as well. How can I achieve this?

bootstrap-4 twitter-bootstrap frontend css html
1 Answers

First of all - I assume you use bootstrap 4.

You can combine native bootsrap grid and bootstrap's .img-fliud to make your image "responsive" (see here for details).

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container mt-3">
  <div class="row">
    <div class="col-6">
      <h1>Header 1</h1>
      <p>Small text</p>
    </div>
    <div class="col-6">
      <img class="img-fluid" src="https://picsum.photos/seed/picsum/640/480" alt="Responsive image">
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-6">
      <h1>Header 2</h1>
      <p>Large text</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in vestibulum lorem. Aliquam elementum suscipit mi, gravida iaculis sapien malesuada maximus. Cras vehicula lectus at urna pharetra, non dictum felis mollis. Mauris vitae justo pretium
        justo lacinia rutrum efficitur rutrum leo. Sed tincidunt nec dui non posuere. In hac habitasse platea dictumst. Curabitur mauris turpis, gravida vitae mollis id, facilisis non urna.</p>
      <p>Donec rhoncus gravida tincidunt. Pellentesque interdum tortor sit amet euismod gravida. Phasellus blandit metus et diam euismod vulputate. Morbi accumsan, nunc vitae congue fermentum, lectus velit iaculis arcu, sed consequat orci nibh quis nisl.
        Sed nec diam vestibulum, ultrices augue porttitor, congue orci. Praesent ac justo massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse a odio molestie urna finibus commodo et hendrerit ligula.
        Etiam eleifend dui sit amet tortor suscipit sagittis. Etiam ex risus, pellentesque vel elementum vitae, elementum sed nibh. Aliquam libero lectus, blandit nec aliquam id, dictum vestibulum lorem. Fusce facilisis augue non justo ultrices eleifend.
        Ut ornare ut erat nec pellentesque. Donec posuere, urna vel lobortis mattis, nulla mi rhoncus lacus, nec porttitor eros nisi id quam. Nullam quam metus, dictum in mattis sed, suscipit id ex.</p>
    </div>
    <div class="col-6">
      <img class="img-fluid my-image" src="https://picsum.photos/seed/picsum/640/480" alt="Responsive image">
    </div>
  </div>
</div>

If you want your image to be the same height as your left column (or bigger, depending on image) - you cat try min-height: 100%; with object-fit: cover; to preserve the aspect ratio.

.my-image {
  min-height: 100%;
  max-width: 100%;
  object-fit: cover;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container mt-3 mb-3">
  <div class="row">
    <div class="col-6">
      <h1>Header 1</h1>
      <p>Small text</p>
    </div>
    <div class="col-6">
      <img class="my-image" src="https://picsum.photos/seed/picsum/1000/1000" alt="Responsive image">
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-6">
      <h1>Header 2</h1>
      <p>Large text</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in vestibulum lorem. Aliquam elementum suscipit mi, gravida iaculis sapien malesuada maximus. Cras vehicula lectus at urna pharetra, non dictum felis mollis. Mauris vitae justo pretium
        justo lacinia rutrum efficitur rutrum leo. Sed tincidunt nec dui non posuere. In hac habitasse platea dictumst. Curabitur mauris turpis, gravida vitae mollis id, facilisis non urna.

      </p>
      <p>Donec rhoncus gravida tincidunt. Pellentesque interdum tortor sit amet euismod gravida. Phasellus blandit metus et diam euismod vulputate. Morbi accumsan, nunc vitae congue fermentum, lectus velit iaculis arcu, sed consequat orci nibh quis nisl.
        Sed nec diam vestibulum, ultrices augue porttitor, congue orci. Praesent ac justo massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse a odio molestie urna finibus commodo et hendrerit ligula.
        Etiam eleifend dui sit amet tortor suscipit sagittis. Etiam ex risus, pellentesque vel elementum vitae, elementum sed nibh. Aliquam libero lectus, blandit nec aliquam id, dictum vestibulum lorem. Fusce facilisis augue non justo ultrices eleifend.
        Ut ornare ut erat nec pellentesque. Donec posuere, urna vel lobortis mattis, nulla mi rhoncus lacus, nec porttitor eros nisi id quam. Nullam quam metus, dictum in mattis sed, suscipit id ex.</p>
    </div>
    <div class="col-6">
      <img class="my-image" src="https://picsum.photos/seed/picsum/1000/1000" alt="Responsive image">
    </div>
  </div>
</div>

user_80364310
Related