<!-- Just to demonstrate for the sake of dynamically generated content, you can have your cms inject the background-image into the section. If not dynamic, best practice is to designate them in the css and not the html -->
<section id="one" class="section fbg" style="background-image:url('https://placeimg.com/1900/1100/animals');">
	one
</section>
<section id="two" class="section">
	two
</section>
<section id="three" class="section fbg" style="background-image:url('https://placeimg.com/1800/1200/nature');">
	three
</section>
<section id="four" class="section">
	four
</section>
<section id="three" class="section fbg" style="background-image:url('https://placeimg.com/1900/1200/people');">
	five
</section>

html {
  color:#eee;
  font-size: 70px;
  font-family:courier; 
}
/* fix the body to be full screen */
body {
  height:100%; /* top and bottom fixed to 0 would accomplish the samething, BUT since height percentage is dependent on the parent elements height, I'm using height:100% here to cascade down in order to allow the section and section:before to be designated as height:100%. */
	margin:0;
  position:absolute; // body just be absolute to expand height and width
  width:100%;
}
.fbg {
	background-attachment: fixed;
	background-position: 50% top;
	background-size: cover;
}
.section {  
	background: cover;
  height:100%;
  position:relative;  
  text-align:center;
  width:100%;
  &:before {
    content:'';
    display: inline-block;
    height:100%;  
    width:0px;
    vertical-align: middle;
  }
}
/* Use "background-color" and not just "background" else your other backgound attribute such as "size", "position", and "attachment" will be reset to default.*/
#one {background-color:RebeccaPurple;}
#two {background-color:Tomato;}
#three {background-color:SkyBlue;}
#four {background-color:MediumSeaGreen;}
#five {background-color:DarkRed;}