[Помогите] Как сделать Фоновую картинку с разметкой под тест и мини картинки html css

Не могу сделать разметку (таблицу) на этой картинке, что бы были определенные области для вставки картинок и текста, и при этом что бы они не смещались в зависимости от того на каком расширении экрана идет просмотр.
Вот области где должны быть картинки и текст
http://www.cyberforum.ru/html/thread1888188.html#post9940958


Я нашел один способ, но при просмотре с планшета идет смещение, так как в коде html указаны определенные границы отступа с лева и по центру.

<div><center><img class="alignnone size-full wp-image-16506" src="http://zombitime.com/wp-content/uploads/2016/12/Zagotovka.png" alt="" width="463" height="476" /></center>

<div style="position: relative; bottom: 410px; text-align: center;"><span style="color: #000000;"><strong>Задание:
Пришла зима. Наступило время подумать
о новогодних подарках!</strong></span></div>
<div style="position: relative; bottom: 378px; left: 200px;"><span style="color: #000000;"><strong>Текст поверх картинки
Количество - 100
Нельзя пропустить</strong></span></div>
<div style="position: relative; bottom: 353px; left: 200px;"><span style="color: #000000;"><strong>Текст поверх картинки
Количество - 150
Нельзя пропустить</strong></span></div>
<div style="position: relative; bottom: 328px; left: 200px;"><span style="color: #000000;"><strong>Текст поверх картинки
Количество - 20
Нельзя пропустить</strong></span></div>

<div style="position: relative; bottom: 540px; left: 85px;"><span style="color: #000000;"><img class="alignnone size-full wp-image-16379" src="http://zombitime.com/wp-content/uploads/2016/12/21.png" alt="" width="89" height="57" /></span></div>
<div style="position: relative; bottom: 536px; left: 85px;"><span style="color: #000000;"><img class="alignnone size-full wp-image-16379" src="http://zombitime.com/wp-content/uploads/2016/12/21.png" alt="" width="89" height="57" /></span></div>
<div style="position: relative; bottom: 526px; left: 85px;"><span style="color: #000000;"><img class="alignnone size-full wp-image-16379" src="http://zombitime.com/wp-content/uploads/2016/12/21.png" alt="" width="89" height="57" /></span></div>
</div>


Так выглядит если просмотр с компьютера:
http://www.cyberforum.ru/html/thread1888188.html#post9940958
Весь этот текст и картинки можно выделить, таким образом они индексируются
http://www.cyberforum.ru/html/thread1888188.html#post9940958
А вот так все это добро выглядит при просмотре с планшета, все просто смещается в право
http://www.cyberforum.ru/html/thread1888188.html#post9940958

Возможно это можно сделать как то в фотошопе?
Не могу найти решение этой проблемы, помогите кто может.

 

Зная по опыту лучше писать отдельные условия стилей для различных устройств. Смотреть и подгонять можно тут responsivetest.jvvsitejob.ru