This post is different from other posts for putting a photo on the website in the background. The image that is placed in the background in this post is not one, but there are several images that are placed vertically below each other and are displayed by scrolling the page of the photos, but the content of the website is fixed.
HTML
<!-- This script got from www.devanswer.com -->
<div class="bg-image img2"></div>
<div class="bg-image img1"></div>
<div class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div class="bg-image img5"></div>
<div class="bg-image img6"></div>
<div class="bg-image img2"></div>
<div class="bg-text">TEXT</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
height: 50%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 700px;
}
.img1 { background-image: url("https://devanswer.com/img/img_snow.jpg"); }
.img2 { background-image: url("https://devanswer.com/img/img_girl.jpg"); }
.img3 { background-image: url("https://devanswer.com/img/img_lights.jpg"); }
.img4 { background-image: url("https://devanswer.com/img/img_nature.jpg"); }
.img5 { background-image: url("https://devanswer.com/img/img_forest.jpg"); }
.img6 { background-image: url("https://devanswer.com/img/img_woods.jpg"); }
.bg-text {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
color: white;
font-weight: bold;
font-size: 80px;
border: 10px solid #f1f1f1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 300px;
padding: 20px;
text-align: center;
}
