Как позиционировать элементы на фоновом изображении в ответном макете

Question

-> Моя цель - разместить текст на фоне изображения и переместить его в фоновом режиме, поскольку я изменяю размер окна браузера (но предотвращаю перемещение текста над краем изображения). Я не хочу, чтобы текст был ниже изображения.

Проблема: Я следовал this учебник для понимания отзывчивого проектирования. После завершения учебника я поставил цель переместить весь текст поверх изображения. В основном я хочу использовать красное изображение в качестве фона для всего, что находится в <section> и <aside> тегах (это просто текст, но я думаю, он должен работать и для форм и т. Д.).

Мой подход был, чтобы обернуть эти два тега в другой <div id="content"> (все еще под <div id="wrapper">), а затем установить его на position:absolute; в CSS. Это накладывает текст на изображение, однако при изменении размера окна текст выйдет из фона. Он не ограничен родительским div (wrapper?). Я думал, что он останется в пределах обертки div, поскольку я думал, что это должен быть его родитель.

Также он плавает и полностью отсоединен от изображения или div, в котором находится изображение.

Вопрос: Так что мой вопрос: как я должен это делать (сохраняя его отзывчивость)?

Код: здесь на jsfiddle: this is the original code и this is what I tried to do (попробуйте изменить размер окна .. это не хорошо выглядеть)

Пример: * P.S. *, чтобы лучше понять, что я пытаюсь достичь, посмотрите на this page, где вы можете видеть, что текст сохраняет свое положение и пропорции на фоне, который вы можете изменить. (Попробуйте изменение размера окна браузера)

Answer 1

В вашем: jsfiddle CSS удалить position: fixed;

#content{ 
     width: 75%; 
     position: fixed; 
     /*Remove this line from CSS (Line number 40 in jsfiddle CSS of your code)*/ 
     padding: 1%; 
     padding-top: 30%; 
    }