Fixing the background while the other elements in the page are scrollable makes your site professional. The following scripts is a long page with different fixed images, which vary by scrolling. Many web elements are available at the page, which are scrollable.
HTML
<!-- This script got from www.devanswer.com -->
<main>
<div class="fixed-bg bg-1">
<h1 class="main-text">DevAnswer</h1>
<p class="sub-text">What Developers Need!</p>
</div>
<div class="fixed-bg bg-1-1">
<div class="text-box">
<h2>Title</h2>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<img style="-webkit-user-select: none;" src="http://devanswer.com/codes/files/fixed-8.jpg">
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
</div>
</div>
<div class="fixed-bg bg-2">
<h1>The capital is Tórshavn.</h1>
</div>
<div class="fixed-bg bg-2-1">
<div class="text-box">
<h2>Title</h2>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<img src="http://devanswer.com/codes/files/fixed-9.jpg">
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
</div>
</div>
<div class="fixed-bg bg-3">
<h1>The capital is Tórshavn.</h1>
</div>
<div class="fixed-bg bg-3-1">
<div class="text-box">
<h2>Title</h2>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<img src="http://devanswer.com/codes/files/fixed-10.jpg">
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
<p>
He lives with his wife and their three grown-up children in a village called Trøllanes on the most northerly tip of the island. The village sits in a hollow, smoothly rounded by glacial ice. To get to the village you must drive through a narrow one-way
tunnel with no lighting. Before it was built in the 1970s the village could only be accessed by boat.
</p>
</div>
</div>
<div class="fixed-bg bg-4">
<h1>The capital is Tórshavn.</h1>
</div>
<div class="fixed-bg">
<h2>Thank You</h2>
<p>
Empower the Convergence of Strategic Analytics
</p>
</div>
</main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body,
html,
main
{
height: 100%;
margin: auto 0;
font-family: 'Raleway','Microsoft JhengHei';
}
.fixed-bg {
min-height: 100%;
background-size: cover;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 20px;
line-height: 1.5;
}
h1 {
text-align: center;
font-size: 3.5em;
color: rgba(255, 255, 255, 1);
text-shadow: 1px 1px 10px #000, 5px 5px 20px #000, 1px 0px 20px #def;
opacity: 0.95;
}
img {
width: 100%;
height: auto;
}
.main-text {
font-size: 5.5em;
line-height:0px;
}
.sub-text{
color:#fff;
line-height:0px;
text-shadow: 1px 1px 10px #000, 5px 5px 20px #000, 1px 0px 20px #def;
}
.text-box {
background: rgba(255, 255, 255, 0.95);
padding: 20px;
margin: 0;
max-width: 500px;
}
.fixed-bg h2 {
font-size: 4em;
}
.fixed-bg p {
text-align: center;
max-width: 500px;
font-size: 1.2em;
text-align: left;
}
.bg-1 {
background-image: url("http://devanswer.com/codes/files/fixed-1.jpg");
}
.bg-1-1 {
background-image: url("http://devanswer.com/codes/files/fixed-2.jpg");
}
.bg-2 {
background-image: url("http://devanswer.com/codes/files/fixed-3.jpg");
}
.bg-2-1 {
background-image: url("http://devanswer.com/codes/files/fixed-4.jpg");
}
.bg-3 {
background-image: url("http://devanswer.com/codes/files/fixed-5.jpg");
}
.bg-3-1 {
background-image: url("http://devanswer.com/codes/files/fixed-6.jpg");
}
.bg-4 {
background-image: url("http://devanswer.com/codes/files/fixed-7.jpg");
}
