Андрей Федоров

Потому что - это inline элемент. Т.е. его ширина в процентах берется от его истинной ширины и влияет только на ширину элемента, а не на ширину блока-контейнера.

Если вы хотите адаптивный дизайн - забудьте о теге img. Используете свойство css background.
пример

Безусловно упустили детали.

Начнем с того, что у вас 3 фона должно быть.
1. Основной цвет.
2. Фон образующий затенение слева.
3. Фон образующий затенение справа.

Если вас не интересует работа сайта в устаревших браузерах рекомендую использовать background-image: linear-gradient();
Если поддержка таких браузеров все же важна, нужно создать две картинки в формате png высотой 1px и в них задать градиенты от прозрачности к темно-синему для правого затенения и от темно-синего к прозрачности для левого.
Дальше комбинируя свойства background-position и background-repeat добиться результата.
Обратите так же внимание, что устаревшие браузеры не поддерживают несколько фонов, указанных через запятую - этот вопрос придется решать в html.

Другое решение основано на обычной или внутренней тени - box-shadow или box-shadow ... inset. Однако тут вам придется решать как скрыть тень сверху и снизу, но оставить справа и слева. Это можно сделать с помощью z-index, margin или position.

codepen.io/aliencash/pen/YyNXby

Это медиа-запросы.
htmlbook.ru/css/value/media

Простой пример:

body {
  width: 940px;
}
@media all and (max-width:940px) {
body {
  width: 100%;
}
}

В данном случае, если ширина экрана более 940px, ширина body 940px, в противном случае - 100%.

градиент же...
codepen.io/aliencash/pen/YywjBb

Сниппет
Виджет

Воу, воу! Адаптивность!!! Респектос. )

Он же вложенный. Он и так будет поверх.
codepen.io/aliencash/pen/XmrwzB

Вероятно вы хотите, чтобы вложенный блок был отцентрован относительно родителя, так это совсем другой вопрос.
codepen.io/aliencash/pen/JYPqOx - если размеры блоков известны.

Решения я не знаю, но в css и во viewport есть зуммирование. Может поможет. Нужно экспериментировать...

ps: К сожалению caniuse.com/#search=zoom

У поисковиков есть готовое решение - "поиск по сайту". Он все понимает. Правда ищет он только на проиндексированных страницах сайта.

Можно добавить к wrapper_bg свойства:
background-size: cover;
background-position: center top;

Но у вас в плане адаптивности есть проблемы поважнее. Блоки текста располагаются хаотично при уменьшении ширины вьюпорта. И потом адаптивная - не значит резиновая. Делайте @media-запросах. В случае с фоном подготовьте несколько полных бекграундов разного размера, и меняйте их в зависимости от размера экрана.

Не много не понял какого эффекта вы хотите добиться, но посмотрите (html + css)
Пример

background: 50% 0% url('http://lorempixel.com/1920/300/') no-repeat;
height: 300px;

высота фиксированая - 300px, фон центруется.

Нужны знания PHP. Ваш сайт должен обращаться к серверу платежного агрегатора или банка предоставляющего интернет-эквайринг путем XML или JSON запросов. Как правило имеется инструкция по внедрению с описанием запросов и прочих взаимодействий.

Механизм который я пробовал реализовать в свое время у себя на сайте включал след.этапы:
1. Отправка запроса на получение токена.
2. Формирование запроса с использованием токена на оплату.
3. Получение ответа от сервера банка.
Дополнительно нужно было реализовать:
1. Получение списка операций.
2. Отмена платежа
3. Возврат средств.

PHP знаю слабо, поэтому пытался пробиться через дебри инструкции 2 месяца, что-то даже получалось, но работу так до конца и не довел. В результате сделал выбор в пользу неавтоматического режима у https://kassa.yandex.ru