А ты не используй бездумно, а возьми тот же bootstrap, разберись в нем (там все очень просто, на самом деле), и посмотри как там реализованы сетка, размеры, и брейкпоинты. Там найдешь ответы на первые три вопроса.
У тебя проблемы с версткой, горизонтального скрола у адаптивной страницы быть не должно при любой ширине. Ищи блок, который вылезает за пределы по ширине.
Если картинка поверх блоков - без JS не обойтись. Нужно высчитывать размеры блоков, делать доп. блоки с фоном поверх контента, соответственно позиционировать картинку в каждом и для каждого указывать прозрачность.
