내 div가 더 작은 해상도에서 정렬되지 않습니까?

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

이것은 간단하고 해결해야 할 문제입니다. div에서 blink (<div class="blink"><!--...--></div>) 클래스의 position: absolute; 속성을 삭제하면됩니다. 여기

---

는 jsfiddle입니다.