Предотвратить прокрутку нижнего колонтитула CSS

Question

#bottom_fade {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: url("bottom-fade.png");
            background-repeat:repeat-x;
            height: 400px;
            z-index: 2;
            }
        .categories {
            position: absolute;
            left: 50%;
            color:black;
            word-wrap: break-word;
            font-family: 15px 'Libre Baskerville', serif;
            margin-left: -200px;
            z-index: 1;
            }
        .categories td {
            width: 200px;
            }

Вы можете увидеть результат кода выше здесь. Попробуйте изменить размер окна браузера, чтобы вы вынуждены прокрутить текст, чтобы увидеть весь текст в таблице.

Когда вы прокручиваете, вы можете увидеть, что #bottom_fade не останется прикрепленным к нижней части страницы, но будет следовать вашей прокрутке. Я не хочу, чтобы это произошло: как я могу сказать, что bottom_fade ВСЕГДА остается прикрепленным к нижней части окна браузера, независимо от того, что происходит с полосой прокрутки?

Большое спасибо!

Answer 1

+ Изменить

#bottom_fade {
        position: absolute;
}

в

#bottom_fade {
        position: fixed;
};

и это должно работать как шарм.

(хороший эффект, кстати!)