Задать вопрос
@VyacheslavY
html

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

Добрый вечер, кто как верстает такие бэкграунды?
a7247d263279418f8ce837b65a3a00a5.png
Вопрос только по адаптиву
  • Вопрос задан
  • 3659 просмотров
Комментировать
Подписаться 38 Средний Комментировать
Решения вопроса 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. И тогда контентный блок будет на всю ширину.
Ответ написан
4 комментария
4 комментария
@sergeyloysha
Front-end developer
Что-то все мудрят. Вот правильное, на мой взгляд, решение: https://sergeyloysha.github.io/cerius-home

Сделано через before, after с поддержкой любого разрешения
Ответ написан
7 комментариев
7 комментариев
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
не думаю что это правильно, но когда столкнулся впервые с такой же проблемой - перепробовал разное. и остановился на absolute, потому что его легче всего делать и адаптировать.
тобишь делается 2 блока с бг через absolute с фикс высотой. а container уже через relative и больший z-index располагается спереди.
Ответ написан
12 комментариев
12 комментариев
Пригласить эксперта
Ответы на вопрос 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;
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написать программу иммитирующую поведение человека для выбора услуг
20 апр. 2024, в 00:08
10000 руб./за проект
Разработать мобильное приложение android "справочник студента"
20 апр. 2024, в 00:01
4000 руб./за проект
[python,go] Залить ВИДЕО в тикток
19 апр. 2024, в 23:00
5000 руб./за проект
Ещё заказы