This page is an example of how to make the background image change when the user scrolls to a particular vertical position on the page. Click on the buttons at the top right or scroll the page to see the effect

Here's the HTML Code


      
<nav>
  <div class="btn" id="btn1">Button 1</div>
  <div class="btn" id="btn2">Button 2</div>
  <div class="btn" id="btn3">Button 3</div>
  <div class="btn" id="btn4">Button 4</div>
  <div class="btn" id="btn5">Button 5</div>
</nav>
<section id="section1">
  <header id="header1">Header 1</header>
  <article id="article1">
    <div class="centeringDiv">
      <p>Article 1</p>
    </div>
  </article>
</section>
<section id="section2">
  <header id="header2">Header 2</header>
  <article id="article2">
    <div class="centeringDiv">
      <p>Article 2</p>
    </div>
  </article>
</section>
<section id="section3">
  <header id="header3">Header 3</header>
  <article id="article3">
    <div class="centeringDiv">
      <p>Article 3</p>
    </div>
  </article>
</section>
<section id="section4">
  <header id="header4">Header 4</header>
  <article id="article4">
    <div class="centeringDiv">
      <p>Article 4</p>
  	</div>
  </article>
</section>
<section id="section5">
  <header id="header5">Header 5</header>
  <article id="article5">
    <div class="centeringDiv">
      <p>Article 5</p>
    </div>
  </article>
</section>

Here's CSS Code


      
header, section, article, aside, figure, figcaption, nav, footer {
	display:block;	
}
body {
	margin: 0px;
	padding: 0px;
	font-size:100%;
	font-family:Verdana, sans-serif;
	color:rgba(0,0,0,1)
}
nav {
	width:500px;
	height:50px;
	position:fixed;
	margin-left:-250px;
	top:0;
	left:50%;
	z-index:99999;	
}
.btn {
	width:100px;
	height:50px;
	text-align:center;
	float:left;
	background-color:rgba(255,0,0,0.5);
	font-size:1em;
	cursor:pointer;
}
.section {
	postion:relative;
	height:auto;
	width:100%;
	clear:both;
	z-index:100;
}
header {
	height:100px;
	padding-top:75px;
	font-size:3em;
	text-align:center;
	width:100%;
	z-index:300;
	position:relative;
	top:0;
	left:0;
}
article {
	background-color:rgba(255,255,255,1);
	height:auto;
	width:100%;
	position: relative;
	z-index:300;
}
.centeringDiv {
	width: 960px;
	min-height:300px;
	height: auto;
	margin: 0 auto;
	position: relative;
	padding:10px;
	z-index: 200;
}

Here's the jQuery Code

You'll need these scripts in the <head> of your html page


      
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>

Here's the script that make the whole thing function properly


      
     	var btnClicked, scrollTime, easingMethod;
	//set initial values for variables
	topAdjustment = 50;//how many pixels do you want the scroll to stop below the top of the browser
	scrollTime = 1000;//how much time in milliseconds 1000ms=1s do you want the scroll to occur
	easingMethod = "easeInOutQuint";//type of easing for the scroll effect
	//actions when buttons are clicked
	$(".btn").click(function () {
	   var btnClicked=$(this).attr("ID");
	   var sectionNumber=btnClicked.substring(3,5);//extracts the button number, i.e. btn1 becomes 1
	   var targetSection = "#section"+sectionNumber;
	   if(sectionNumber!=0){//since there's no section0, this execute for sectionNumbers not equal to 0
		  $(targetSection).goTo();//calls on function goTo below to scroll to targetSection
	   } else {//in the case that the sectionNumber is equal to 0
		  $("body").goTo();//calls on function goTo below to scroll to <body> tag y position	
	   }
	});
	(function($) {//defining a function
	   $.fn.goTo = function() {
		  $("html, body").stop().animate({//stop is for quick clicking of buttons to stop current action
			 "scrollTop": $(this).offset().top//the executes the scrolling action to new y position
		  }, scrollTime, easingMethod);
		  return this;
	   }
	})(jQuery);
	//Change background image code
	var section1H, section2H, section3H, section4H, section5H, changeBGAdjustment;
	changeBGAdjustment = 100;
	//gather info about where the top of each section starts relative to the top of the screen when the page loads
	section1H = $("#section1").offset().top - changeBGAdjustment;
	section2H = $("#section2").offset().top - changeBGAdjustment;
	section3H = $("#section3").offset().top - changeBGAdjustment;
	section4H = $("#section4").offset().top - changeBGAdjustment;
	section5H = $("#section5").offset().top - changeBGAdjustment;
	//create an array of image locations for future use down below
	var bgImages = [];
	bgImages[0] = "url(/galleries/backgrounds/metal1.jpg)";
	bgImages[1] = "url(/galleries/backgrounds/metal2.jpg)";
	bgImages[2] = "url(/galleries/backgrounds/metal3.jpg)";
	bgImages[3] = "url(/galleries/backgrounds/metal4.jpg)";
	bgImages[4] = "url(/galleries/backgrounds/metal5.jpg)";
	//preload background images so that there is no white flash when background images change 
	//due to delay in downloading new background image
	$('<img src="/galleries/backgrounds/metal1.jpg"/>');
	$('<img src="/galleries/backgrounds/metal2.jpg"/>');
	$('<img src="/galleries/backgrounds/metal3.jpg"/>');
	$('<img src="/galleries/backgrounds/metal4.jpg"/>');
	$('<img src="/galleries/backgrounds/metal5.jpg"/>');
	//now create a div that
	$("body").prepend('<div id="bgHolder"></div>');
	$("#bgHolder").css({
		"width":"100%",
		"height":$("html").innerHeight(),
		"background-image":bgImages[0],
		"background-position":"center top",
		"background-repeat":"repeat-y",
		"position":"fixed",
		"top":"0",
		"left":"0",
		"z-index":"0"
	});
	$(window).scroll(function(){
		var yPos = 0, bgURL;
	   yPos = $(window).scrollTop();
	   switch (true) {
			case (yPos < section2H):
				bgURL = bgImages[0];
				break;
			case (yPos < section3H):
				bgURL = bgImages[1];
				break;
			case (yPos < section4H):
				bgURL = bgImages[2];
				break;
			case (yPos < section5H):
				bgURL = bgImages[3];
				break;
			case (yPos >= section5H):
				bgURL = bgImages[4];
				break; 
	   }
		$("#bgHolder").css({
			"background-image":bgURL
		});
	});

Article 4

Article 4Article 4

Article 5