Размытие фона только одного огромного элемента

У меня есть страница с огромным фоном, который фиксирован - как в:

body {
    background: url(...) no-repeat center center fixed;
}

Теперь, чтобы удалить фокус с фонового изображения, я подумал о том, чтобы просто размыть его в момент начала реального контента. Подумайте о прозрачном jumbotron, за которым следует один гигантский div, содержащий все содержимое. Пример разметки:

<div id="navigation">
    <nav>...</nav>
</div>
<div id="page">
    <div class="transparent-jumbotron">
        Big intro to the site goes here
    </div>
    <div class="content">
        The actual content goes here
    </div>
</div>
<div id="footer">...</div>

Я пробовал различные подсказки и трюки в Интернете, но большинство из них было то, что #page.contents имел фон сайта, но при прокрутке немного, оказалось, что был один экземпляр фона, охватывающего оригинал, и тогда был нормальный, незамысловатый фон. Это содержимое div также имеет полупрозрачный фон, применяемый через rgba() чтобы затемнить фон.

Поэтому мой вопрос: как я могу размыть большую часть сайта, у которого есть фиксированное фоновое изображение, но много контента, для которого потребуется прокрутка (например, динамическое применение фильтра размытия)?