Фиксированный фон при прокрутке страницы

Реализация фиксированных background\’ов при прокрутке страницы..в общем смотрите демо.

Как реализовать:

1. Разметка html

<main>
	<div class="cd-fixed-bg cd-bg-1">
		<h1><!-- title goes here --></h1>
	</div>

	<div class="cd-scrolling-bg cd-color-2">
		<div class="cd-container">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
			</p>
		</div>
	</div>
</main>

2. Стили CSS

body, html, main {
	/* important */
	height: 100%;
}

.cd-fixed-bg {
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

.cd-fixed-bg.cd-bg-1 {
  background-image: url("../img/cd-background-1.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../img/cd-background-2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("../img/cd-background-3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("../img/cd-background-4.jpg");
}

.cd-scrolling-bg {
	min-height: 100%;
}

Готово!