One interesting method to design a web page is to fix the background and prevent it to be scrolled by other materials of the page. The following code provides this feature. In addition, the background is changed automatically when one part is finished. Therefore, the image gets fit to the texts!


HTML
<!-- This script got from www.devanswer.com -->
<div class="wrapper">

<section class="saying_block Musk">
<div class="saying_content">
<div class="text_box">
<h2>“ I like to be involved in things <br>that change the world ”</h2>
<br>
<p> - Elon Musk</p>
</div>
</div>
</section>

<section class="saying_block buffett">
<div class="saying_content">
<div class="text_box">
<h2>“ Games are won by players who <br>focus on the playing field, not by <br>those whose eyes are glued <br>to the scoreboard. ”</h2>
<br>
<p> - Warren Edward Buffett</p>
</div>
</div>
</section>
<section class="saying_block bezos">
<div class="saying_content">
<div class="text_box">
<h2>“ Cleverness is a gift, <br>kindness is a choice ”</h2>
<br>
<p> - Jeff Bezos</p>
</div>
</div>
</section>

<section class="saying_block sandberg">
<div class="saying_content">
<div class="text_box">
<h2>“ Done is better than perfect ”</h2>
<br>
<p> - Sheryl Sandberg</p>
</div>
</div>
</section>
<section class="saying_block Jobs">
<div class="saying_content">
<div class="text_box">
<h2>“ Stay hungry , stay foolish ”</h2>
<br>
<p> - Steven Paul Jobs</p>
</div>
</div>
</section>
<div id="include_footer">
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
.wrapper {
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
}
div {
  display: block;
}
.saying_block.Musk {
  background-image: url(http://devanswer.com/codes/files/m_musk.jpg);
}
.saying_block {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
article,
aside,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}
html,
body {
  width: 100%;
  height: 100%;
  background: #e9e9e9;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  color: #172730;
}
html,
body {
  width: 100%;
  height: 100%;
  background: #e9e9e9;
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  color: #172730;
}
.saying_block.Musk .saying_content {
  background-color: rgba(183, 73, 73, 0.7);
}
.saying_block .saying_content {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
.saying_block .saying_content {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.saying_block .saying_content .text_box h2 {
  font-weight: normal;
  font-size: 42px;
  line-height: 50px;
  font-family: "Bitter", serif;
  font-style: italic;
  letter-spacing: 1px;
}
h2 {
  display: block;
  font-size: 1.5em;
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}
.saying_block .saying_content .text_box h3 {
  font-size: 15px;
  letter-spacing: 15px;
  font-weight: normal;
  padding: 30px 0 20px 0;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
h3 {
  display: block;
  font-size: 1.17em;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}
.saying_block .saying_content .text_box p {
  font-size: 12px;
  letter-spacing: 2px;
  padding: 20px 0 20px 0;
  opacity: 0.7;
}
p {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}
.saying_block.buffett {
  background-image: url(http://devanswer.com/codes/files/m_buffett.jpg);
}
.saying_block.buffett .saying_content {
  background-color: rgba(29, 69, 106, 0.7);
}
.saying_block.bezos {
  background-image: url(http://devanswer.com/codes/files/m_bezos.jpg);
}
.saying_block.bezos .saying_content {
  /* background-color: rgba(223, 168, 0, 0.7); */
  background-color: rgba(16, 36, 55, 0.7);
}
.saying_block.sandberg {
  background-image: url(http://devanswer.com/codes/files/m_sandberg.jpg);
}
.saying_block.sandberg .saying_content {
  background-color: rgba(210, 24, 76, 0.7);
}
.saying_block.Jobs {
  background-image: url(http://devanswer.com/codes/files/m_jobs.jpg);
}
.saying_block.Jobs .saying_content {
  background-color: rgba(0, 159, 153, 0.7);
}