Резиновый background?

Question

[angry_yum]

Добрый день, пожалуйста подскажите, как сделать резиновый background в данном случае?
Чтобы при уменьшении экрана текст не налазил на саму картинку.
Буду очень благодарен.

Comments

[Dima Polos]

Именно фоном обязательно? Не проще поставить блок с картинкой слева? Картинке задать max-width 100%, object-fit cover. Если надо фоном, то напишу в ответ.

[Dima Polos]

Еще простой вариант: общий контейнер для картинки и блока с текстом, далее родителю display: flex, одному и второму flex-basis ставите как на макете, ширину, и первому блоку фоновую картинку, а второму остальную верстку, флексы по умолчанию растягивают детей по размеру самого большого контейнера.

Answer 1

[Кирилл Несмеянов]

background-size: 50vw auto;

Подойдёт?

Answer 2

[Василий Черненков]

Сделать картинку НЕ фоном, а вставить ее с помощью тега
Можно придумать еще кучу способов, но чтоб полноценно ответить на Ваш вопрос - нужно видеть как именно реализована текущая верстка

Comments

[angry_yum]

Если я вас понял, то вы имеете веду увидеть целый макет?
Если неправильно понял, то сразу прошу прощения.

[Василий Черненков]

angry_yum, я имел в виду код верстки
есть ссылка на сайт?

Answer 3

[Dima Polos]

О! Я над таким мучался, долго... Придумал такую структуру:
1. Блоку с текстом задал ширину по сетке, как в макете. Задал максимальный маржин слева, чтоб блок был всегда справа. Слева остается пустота.
2. Блоку с текстом задал position relative.
3. Создал псевдоэлемент ::before{
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
right: -100%;
background: transparent url(img/bg.png) no-repeat top;
background-size: cover;
}
Псевдоэлемент растянут по высоте на высоту родителя, вынесен влево полностью на 100% от родителя, то есть из родителя на всю катушку, далее просто задал картинку фоном, и там только позиционировать ее надо будет, а может и не надо, еще поиграться свойствами background-size, и все. Иногда бывали такие моменты, что на пару пикселей края не совпадали, это из-за бордеров может быть или маржины/паддинги какие-то, инспектором смотрите и потом двигаете псевдоблок но не через top/left... а margin-top +/-, margin-left+/- на величину этого самого бордера или маржина.

Answer 4

[Айнур Валиев]

background-size: cover
background-size: contain