A
A
Alekosh Akhosh2021-08-30 22:13:04
Layout
Alekosh Akhosh, 2021-08-30 22:13:04

How to make a block with a background image?

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?

612d2c62a7027100726800.png

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 the question

In order to leave comments, you need to log in

2 answer(s)
A
Artem Zolin, 2021-08-30
@artzolin

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

R
ramanovsky, 2021-08-31
@ramanovsky

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question