CSS: как сохранить мой текст фиксированным относительно размера окна?

Моя проблема в том, что я хочу, чтобы мой текст не двигался, когда я изменяю размер окна, как это происходит с изображением.

Я пробовал использовать контейнер <div> с left атрибутом, среди прочего, однако я не могу добиться результата, который я ищу.

У меня есть следующий CSS:

body {
    background-color: #204f6e;
    background-image: asset-url('beige_paper.png');
    background-position: top left;
    background-repeat: repeat;
}
#div1 {
    visibility:show;
    left: 606px;
    top: 59px;
    z-index:200;
}
.image1 {
    height: 9.65em;
}
#div2 {
    visibility:show;
    left: 187px;
    top: 218px;
    z-index:200;
}
#div3 {
    visibility:show;
    left: 185px;
    top: 305px;
    right: 200px;
    z-index:200;
}
#div4 {
    visibility:show;
    left: 215px;
    top: 390px;
    right: 200px;
    z-index:200;
}

и у меня есть следующий HTML:

<div id="div1">
    <%=i mage_tag( "logo.png", :class=>"image1") %>
</div>

<br />

<div class="contents" id="div2">
     <h1>
         <p>
             <span style="color: #008080;">
                 <strong>
                     <span style="font-size: 60px;">Some text</span>
                 </strong>
             </span>
         </p>
     </h1>
</div>

<div class="contents" id="div3">
    <p> 
        <span style="font-size: 11px; color: #808080;">
            <span style="font-size: 30px;">
                Some text
            </span>
            <br />
        </span>
    </p>
</div>

<div class="contents" id="div4">
    <p> 
        <span style="font-size: 24px; color: #808080;">
            Some text
        </span>
    </p>
</div>

Вот JSfiddle