Meine Divs werden in kleineren Auflösungen unausgerichtet?

Question

Verwenden Sie nur HTML und CSS.

So habe ich ein großes Hintergrundbild, das ich gezeichnet habe. Ich möchte keine hässliche horizontale Bildlaufleiste so Ich legte die BG-Bildbreite auf: 100%;

Ich habe Prozente auf ALLES sogar Schriftgröße verwendet. Egal, was ich tue, der Text läuft auf der Seite mit kleineren Auflösungen.

Wenn die Auflösung kleiner ist, ist das Hintergrundbild auch kleiner und das div wird nicht mehr zum Hintergrund?

Ich kann es nicht zentriert aussehen und nicht in kleineren Auflösungen vom Bildschirm laufen.

Bitte erläutern Sie, was ich falsch mache und was die Lösung ist.

Hier ist der grundlegende Code so weit:

<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> 

(Text weiter in der Mitte des Bildschirms) aber den Boden, auf den kleineren Auflösungen abläuft.

Answer 1

Dies ist ein triviales und einfaches Problem zu lösen. Alles, was Sie tun müssen, ist die position: absolute; Eigenschaft von Ihrem div mit der Klasse blink (<div class="blink"><!--...--></div>) zu entfernen.

---

Hier ist ein jsfiddle.