Как реализовать смену фона блока при прокрутке страницы?

поставить 4 див блока с разным фоном абсолютом друг в друга и менять прозрачность при прокрутке и показывать тот блок который нужен

Див движется, фон или картинка в нем меняются. В чем проблема-то?

Конкретно я сходил за вас и скопировал действующее вещество.

<div style="transform: translate3d(0px, -23.1729px, 0px);" class="hero-image-bundle">
						<figure class="hero-image hero-routing"></figure>
						<figure class="hero-image hero-apps"></figure>
					</div>

транслейт делает смещение, а фигуры содержат фон и переключаются.

Если устроит jquery то решение вот:

 <script type="text/javascript">

	$(window).scroll(function(){

		// 200px от верха

		if ($(window).scrollTop() > '200'){

			$('#div').css({"background":"url(http://www.fonstola.ru/pic/201111/1600x900/fonstola.ru-55699.jpg);"});

		}

		// 400px от верха

		if ($(window).scrollTop() > '400'){

			$('#div').css({"background":"url(http://www.zastavki.com/pictures/originals/2012/Backgrounds_Circles_colors_035456_.jpg);"});

		}

		// низ активного окна...

		if ($(window).scrollTop() == $(document).height() - $(window).height()){

			alert($(window).scrollTop());

			$('#div').css({"background":"url(http://www.fonstola.ru/pic/201111/1366x768/fonstola.ru-55713.jpg);"});

		}

	});

 </script>

измените значения на нужные и будет норм. проверил у себя - работает.:)

kostyanet, а как "транслейт делает смещение"?

Это через яваскрипт прописывается, чтобы значения обновлялись?

На примере отслеживается позиция при прокрутке и в определенном моменте у блока меняется position с absolute на fixed. И применяется transform: translate3d для каждого движения колеса мыши. Если не усложнять, то лучше как в примере выше через Jquery учитывать положение при прокрутке, а в CSS элемента добавить transition с нужными значениями для плавности смены фона.