Кто как адаптивно верстает 50% бэкграунды (слева одна картинка, справа другая)?

Добрый вечер, кто как верстает такие бэкграунды?
a7247d263279418f8ce837b65a3a00a5.png
Вопрос только по адаптиву
  • Вопрос задан
  • 3601 просмотр
Решения вопроса 3
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Я такие вещи делаю через after и before, я за чистоту кода в html.
UPD1: Забыл добавить для .block { overflow-x: hidden; } , чтобы не было прокрутки.

UPD2: При перестраивании на мобильную версию собственно ничего не уедет.

UPD3: Адаптация https://jsfiddle.net/webirus/z5cbaq91/
Всего 3 стиля переопределяешь и все.

UPD4: Если блок с контентом должен быть как тут dohodnaya-kvartira.webflow.io , то в принципе ничего не меняется. Убираем .form, через after кидаем картинку на .wrapper и двигаем. А блоку .content добавляем z-index. И тогда контентный блок будет на всю ширину.
Ответ написан
@sergeyloysha
Front-end developer
Что-то все мудрят. Вот правильное, на мой взгляд, решение: https://sergeyloysha.github.io/cerius-home

Сделано через before, after с поддержкой любого разрешения
Ответ написан
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
не думаю что это правильно, но когда столкнулся впервые с такой же проблемой - перепробовал разное. и остановился на absolute, потому что его легче всего делать и адаптировать.
тобишь делается 2 блока с бг через absolute с фикс высотой. а container уже через relative и больший z-index располагается спереди.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
webrevenue
@webrevenue
Веб-дизайнер и SEO оптимизатор
Я сделал бы примерно так:
<section class="" style="background-image:url('images/kartinka.jpg');"> 
<div class="">1</div>
<div class="">2</div>
</section>

секции присваивается фон и прописываются стили при необходимости
в дивах уже содержимое, ну и стили как минимум такие width: 50%; float: left; position: relative;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы