Мои деления становятся невыровненными в меньших разрешениях?

Question

Использование только HTML и CSS.

Так что у меня есть большое фоновое изображение, которое я нарисовал. Мне не нужна ужасная горизонтальная полоса прокрутки, поэтому я установил ширину изображения bg: 100%;

Я использовал проценты на ВСЕ, даже на размер шрифта. Тем не менее, независимо от того, что я делаю, текст бежит со страницы в меньших разрешениях.

Когда разрешение меньше, фоновое изображение также меньше, поэтому div становится не выровненным по отношению к фону.

Я не могу заставить его выглядеть по центру и не убегать с экрана в меньших разрешениях.

Пожалуйста, объясните, что я делаю не так и каково решение.

Вот основной код на данный момент:

<img src="http://i.imgur.com/Kl5fDHa.png" class="dead" style="position: fixed;">

<img src="http://imageshack.com/a/img924/5227/cxz6vT.png" id="vacant" style="position: absolute;">



<style>

#vacant {
top: 0;
left: 0;
width: 100%;
height: auto; }

.dead {
top: 0;
left: 0;
width: 100%;
height: 100%; }

body { 
background: #071b41; }

.blink {
top: 166%;
left: 38%;
color: #66799b;
font-family: Times New Roman;
font-size: 80%;
height: 3620px;
overflow: hidden; }

</style>

<div class="blink" style="position: absolute;">
<center>

Lorem ipsum dolor sit amet, <br>
consectetur adipiscing elit. <br><br>

Fusce venenatis tortor at diam tempus, <br>
at gravida arcu placerat. <br>
Donec varius placerat justo in consequat. <br>
Ut hendrerit tellus id ultrices tincidunt. <br><br>

(текст продолжается вниз по центру экрана), но уходит с нижней части экрана при меньшем разрешении.

Answer 1

Это тривиальная и простая проблема для решения. Все, что вам нужно сделать, это удалить position: absolute; собственность от вашего div с классом blink (<div class="blink"><!--...--></div>).

---

Вот jsfiddle.