Как верстать современные лендинги?

То ли через background то ли просто через img

img - это неотъемлемая часть контента, которая критически важна для пользователя, напр. картинка товара.
background - это часть интерфейса: иконки, фон блоков, спецэффекты, всё что касается дизайна;

а здесь вообще без понятия как.

Должно быть нарисовано в макете как должно выглядеть на разных разрешениях - но это в идеальном мире.

А так, чисто на мой вкус:
-Скрыть картинку
-Залить фон чистым темно фиолетовым цветом как на картинке
-Блок враппер с текстом растягивать не на 50% а на все 100%
-Высоту блока враппера вместо фиксированной высоты экрана уменьшить до высоты контента.

Как правило все блоки оформления позиционируются по каждой секции (section).

Порядок для одной секции: оформление-ДО, текст секции, оформление-ПОСЛЕ.
1. Оформление-ДО - ставится первым (верхние углы и слева)
2. Основной текст секции - ставим в середине, оттеняем случайные возможные "наезды" слоёв оформления на текст с помощью прозрачности и z-index'а.
3. Оформление-ПОСЛЕ - ставится последним (справа и нижние углы).

Если картинки/SVG оформления не вписываются в ширину viewport'а - они масштабируются по ширине viewport (иногда со смещением за зону видимости, чтобы сохранить крупную детализацию, потеряв какую-то часть изображения по краям).

Также, можно ограничить высоту блоков оформления сверху и снизу через max-height в адаптивном режиме.

1. svg формат + grid layout сетки
2. самостоятельно отрисовать все, кроме кнопки и втиснуть.
3. Верно подметил, коллега! background, но уже с сеткой Grid Layout
4. (олдовый гимор) 2 блока, один в другой вложить, через позиционирование и z-index выровнять.

1 вариант самый верный. Проще вставить svg для конкретного разрешения, чем "утюжить и рвать" бедный png, прописывая (не дай боже на чистом css) сотни медиа-запросов, растягивая линейку дедлайна на недели и подключая традиционным образом десятки скриптов.