:Псевдоэлементы before и :after в html-теге неудобны в Chrome

Я пытаюсь научиться использовать псевдоэлементы :before и :after. Я пытаюсь добавить черный фон в нижнюю часть страницы в качестве липкого нижнего колонтитула, но, похоже, он работает неправильно.

В основном у меня есть повторяющееся изображение в качестве фона элемента HTML, а затем я добавляю абсолютный элемент div, расположенный внизу со сплошным черным фоном.

Я просто хотел бы отметить, что это обучающий эксперимент, а не способ достижения того же эффекта, но то, что я пытаюсь, работает в Firefox, но не в Chrome!

Вот мой CSS:

html {
    background-image: url('images/template/html-bg.jpg');
    background-position: top left;
    background-repeat: repeat-x;
    background-color: #0e0e0e;
    height: 100%;
    position: relative;
}

html:before {
    content: "";
    display: block;
    background-color: #000;
    width: 100%;
    height: 138px;
    bottom: 0px;
    position: absolute;
}

В FF страница отображается так, как я и ожидал, но в Chrome вся страница черная... Есть идеи, я делаю это неправильно?