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

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.