How to make a block with a background image?

Question

Layout

Goodnight.
I don't know how to make this block.
I tried to make the image a separate div, or create it using background-image, but to no avail. Either the texts are not adaptive, or the container is gone, so and so, can you explain / help with the problem?



Or is it possible to make the text take up 70% of the width, and the image the remaining 30%, taking into account that it is on the right edge?

Answer 1

Take a bootstrap grid or any other, it will make life easier for you at the initial stage

<div class="section">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-7">
        <!-- тут текст -->
      </div>
    </div>
  </div>
</div>

.section {
  position: relative;
  padding: 2rem 0; 
  min-height: 320px;
  background: #111;
}
.section::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 80%;
  background: url( '../images/bg.png' ) center / cover no-repeat;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

Think about adaptability on mobile devices

Answer 2

There, as far as I remember, you need to set the overflow-x: hidden property on the page or section so that there is no scoring, then the picture will simply disappear.