jquery - 背景として使用される書かれたテキストがコンテンツをプッシュしないようにする

Question

ページの背景としてテキストを使用しようとしていますが、本文のメイン コンテンツをそのテキストの上に表示したいと考えています。ここに示す方法は静的テキストに対して機能しますが、私のテキストは jquery を使用して動的に出力されます。

これが私がこれまでに持っているものです：

html

<h1>body content </h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Lobster);

#msg{
    text-align:left;
    font-size:30px;
    font-family:lobster;
    color:#bb4e28;
    float:none;
    z-index: -1;
    overflow: hidden;
}

jquery

var showText = function (target, message, index, interval) {
    if (index < message.length) {
        $(target).append(message[index++]);
        setTimeout(function () {
            showText(target, message, index, interval);
        }, interval);
    }
};

$(function () {

    showText("#msg", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra risus et nunc fermentum sed iaculis tortor rhoncus. Nulla facilisi. Nulla pharetra libero sed urna semper eu viverra orci volutpat. Mauris est dolor, porta ut sollicitudin sit amet, molestie vitae lectus. ", 0, 20);

});

http://jsfiddle.net/J7JTB/

現在、背景テキストが残りのコンテンツを押し下げていることがわかります。私が望むのは、コンテンツの後ろに印刷し、特定の長さに達してもページがスクロールしないようにすることです。それを行う方法はありますか？

Answer 1

#msg {
    position: fixed;
} 

http://jsfiddle.net/isherwood/J7JTB/3/