Как сверстать блок с фоновым изображением?

Question

[Alekosh Akhosh]

Доброй ночи.
Не понимаю как бы сверстать эту блок.
Картинку пытался сделать отдельным див, или создать через background-image, но безуспешно. То тексты не адаптивны, или контейнер ушел, так-то так, можете объяснить/помочь с задачкой?



или можно сделать так, чтобы текст занимала 70% ширины, а картинка оставшиеся 30%, с учетом чтобы он был на правом краю?

Comments

[Ankhena]

Сначала нужно представить как это будет выглядеть на ширинах отличных от макетных.
Примерно с интервалом в 100-200 пикселей.
А дальше совсем легко - переписать придуманное на css.

Самое простое для придумывания - это масштабирование.
Достигается за счет использования единиц wv и функции clamp (если всё же нужно перестать изменять размеры на какой-то минимальной и максимальной ширине, ну и чтобы размер шрифта не превратился в мелкоскопический).
На мелких экранах перестраивать в столбик.

Картинка - фон псевдоэлемента или просто фон.
Для сохранения пропорций используйте хак с паддингом.

p.s. если хотите именно научиться верстать, на бутстрап не ведитесь.

[Alekosh Akhosh]

Ankhena, могу узнать подробнее про хак с паддингом?

[Ankhena]

Alekosh Akhosh, ага https://yandex.ru/search/?text=css+пропорции+блока...

[Froggyweb]

Смотри как сделано здесь https://vitya8989.github.io/padding/

Answer 1

[Артем Золин]

Возьмите бутстрап сетку или любую другую, облегчит вам жизнь на начальном этапе

<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%);
}

Над адаптивностью на мобильных устройствах думайте сами

Answer 2

[ramanovsky]

Там насколько помню нужно на страницу или секцию задать свойство overflow-x: hidden чтобы скорла не было, тогда картинка будет пропадать просто.