<main>
<div class="fixed-bg bg-1">
<h1 class="main-text">iPASP</h1>
<p class="sub-text">Background-attachment fixed</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="https://images.unsplash.com/photo-1449157291145-7efd050a4d0e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80">
<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="https://images.unsplash.com/photo-1496247749665-49cf5b1022e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80">
<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="https://images.unsplash.com/photo-1505424297051-c3ad50b055ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80">
<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>
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("https://images.unsplash.com/photo-1501621667575-af81f1f0bacc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
.bg-1-1 {
background-image: url("https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
.bg-2 {
background-image: url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
.bg-2-1 {
background-image: url("https://images.unsplash.com/photo-1521227439113-619913356230?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
.bg-3 {
background-image: url("https://images.unsplash.com/photo-1455165814004-1126a7199f9b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
.bg-3-1 {
background-image: url("https://images.unsplash.com/photo-1532186773960-85649e5cb70b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80");
}
.bg-4 {
background-image: url("https://images.unsplash.com/photo-1496065187959-7f07b8353c55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.