Как разместить фон на половину контента, чтобы сам контент при этом оставался на месте?

Question

[qory_san]

Добрый день, нужно сделать блок, указанный на картинке. Ума не приложу, как можно разместить так фон, если ставлю фон поверх контейнера, то вместе с попыткой продвинуть на нужную позицию фон - двигается весь контент. Размещу фон внутри контейнера - обрежется сам фон. С бустрапом до этого никогда не работала, поэтому в построении самого кода могут быть ошибки.


Мой код ниже:

<div class="container velo-cont">
 <div class="row">
    <div class="col-8"><img src="kisspng-gt.png" class="img-fluid rounded float-start"></div>
    <div class="col-4"><h1 class="velo-new">Новинки</h1>
    <div class="col-4"><h1 class="velo-h">Горные велосипеды</h1>
    <button type="button" class="btn-velo btn-lg">перейти в каталог</button></div>
  </div>
  </div>
</div>

Answer 1

[ThunderCat]

велик засунуть бэкграундом в col-8 и дать ему background-size: contain, думаю то что нужно.