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

Question

[Вячеслав Яшников]

Добрый вечер, кто как верстает такие бэкграунды?

Вопрос только по адаптиву

Answer 1

[Сергей Горячев]

Я такие вещи делаю через 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. И тогда контентный блок будет на всю ширину.

Comments

[Вячеслав Яшников]

https://jsfiddle.net/svjbsp0d/5/ тогда уже так:) Чтобы на разрешении 2560px небыло пустого места справа

[Сергей Горячев]

Вячеслав Яшников: ну, это уже мелочи и доработки, я просто суть изобразил)

[TheBububo]

Sergey Goryachev: а для чего там after? можно же у .form задать background

[Сергей Горячев]

TheBububo: ну, попрообуйте, чтобы было адаптивно и работало корректно, потом уж задавайте вопросы.

Answer 2

[Sergey Loysha]

Что-то все мудрят. Вот правильное, на мой взгляд, решение: https://sergeyloysha.github.io/cerius-home

Сделано через before, after с поддержкой любого разрешения

Comments

[Полина Емельянова]

Если я не ошибаюсь, то получается как-то так:
codepen.io/emelyanova/pen/xENQxk
Мне кажется это самое разумное решение. И поддерживается чуть ли не до IE6! Круто! Спасибо!
ГЛАВНОЕ! Высота у картинки должна быть больше или равна высоте секции. А то будет склейка как у меня.

[Сергей Горячев]

Не совсем уловил, чем это решение отличается от моего)

[Sergey Loysha]

Sergey Goryachev: Эм, давайте объясню)
1 - нам не нужен overflow, потому что не выходим за пределы экрана
2 - поддерживается действительно любое разрешение экрана
3 - блоки не раздвигаются на 5k разрешении

[Сергей Горячев]

sergeyloysha: Код давай) Я так лучше воспринимаю)

[Сергей Горячев]

sergeyloysha: В песочницу лучше)

[Полина Емельянова]

Sergey Loysha: Сергей, простите, но overflow в вашем примере у секции стоит. И по моему измышлению он пригодиться, т.к. безболезненно растягивать-сжимать картинки желательно только с ним. Или я в чем-то ошибаюсь?

[Sergey Loysha]

Полина Емельянова: он не пригодится / делался для другого совсем функционала / В вашем случае картинку нужно указывать через background-image

Answer 3

[iBird Rose]

не думаю что это правильно, но когда столкнулся впервые с такой же проблемой - перепробовал разное. и остановился на absolute, потому что его легче всего делать и адаптировать.
тобишь делается 2 блока с бг через absolute с фикс высотой. а container уже через relative и больший z-index располагается спереди.

Comments

[Вячеслав Яшников]

интересное решение, но может есть еще что-то, не хотелось бы делать фикс высоту

[Вячеслав Яшников]

не получится на больших разрешениях растягивать картинку, это тоже минус

[iBird Rose]

Вячеслав Яшников: ну да. фикс высота - решение плохое. но в большинстве случаев там находится фиксированный контент. тобишь который один раз написал и забыл. а если все же контент будет другим - то на js можно высоту выравнивать по блоку контента.
почему не получится растягивать? там 2 блока с шириной 50% и background. тяни сколько хочешь

[Вячеслав Яшников]

iBird Rose: Так как блоки будут в контейнере - 50% от контейнера, контейнер фиксированной ширины, а если блоки эти вложить в секцию (wrapper) то получится наезд при уменьшении ширины viewport

[Вячеслав Яшников]

iBird Rose: если делать так внутри секции то проще задать это через background в css

[Вячеслав Яшников]

iBird Rose: dohodnaya-kvartira.webflow.io видимо я не совсем правильно понял, действительно, это решение данной проблемы

[iBird Rose]

Вячеслав Яшников: кажись ты меня не понял. я вот о таком решении говорил https://jsfiddle.net/LngL05b5/

[Вячеслав Яшников]

iBird Rose: зачем так усложнять, когда достаточно одной секции и ей задать релатив и в ней уже все строить, чем создавать bg-wrap

[iBird Rose]

Вячеслав Яшников: и кстати о фиксированной высоте. когда дело касается разделения блока на 2 части - тебе в любом случае надо будет указывать высоту. потому если это не flex или table-cell - высоты всегда будут различаться, если их не указать вручную.

[iBird Rose]

Вячеслав Яшников: "зачем так усложнять, когда достаточно одной секции" - а куда ты собрался сувать container с контентом который по макету у тебя с фиксированной шириной 1200px к примеру?

[Вячеслав Яшников]

iBird Rose: dohodnaya-kvartira.webflow.io в нее же

[iBird Rose]

Вячеслав Яшников: ну да. так div'ов меньше) пусть будет так)

Answer 4

[Алексей Голягин]

Я сделал бы примерно так:

<section class="" style="background-image:url('images/kartinka.jpg');"> 
<div class="">1</div>
<div class="">2</div>
</section>

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