Code is to show parallax effect. I have 3 boxes on top of image, will slide up and down on scrolling. There is a white band behind the boxes covering the whole width of the image, which also scrolls. How to remove this white band? Thanks in advance.
.parallax {
/* the image used */
background-image: url("../mdck-parallaxPhoto/ganesh (4).jpg");
/* set specific height */
min-height: 700px;
/* create parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.flexBox {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.text-block {
background-color: white;
padding: 50px 50px 50px 50px;
border: 2px solid black;
border-radius: 20px 20px 20px 20px;
}
p {
font-weight: bold;
font-family: Helvetica, sans-serif;
color: red;
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1">
</head>
<body>
<!-- parallax effect -->
<div class="parallax"></div>
<!-- keep images side by side -->
<div class="flexBox">
<div class="text-block">
<p>Estd. 1984</p>
</div>
<div class="text-block">
<p>Staff 25</p>
</div>
<div class="text-block">
<p>Students 1000</p>
</div>
</div>
<div class="parallax"></div>
</body>
</html>
You need to remove one of the <div class="parallax"></div>
and put the <div class="flexBox">
inside the other one. This way the background will be transparent.
Add a padding-top:100vh
to position your divs.
Add justify-content: space-around
to add space around your divs.
.parallax {
/* the image used */
background-image: url("https://placehold.jp/1500x1500.png");
/* set specific height */
min-height: 700px;
padding-top:100vh;
/* create parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.flexBox {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.text-block {
background-color: white;
padding: 50px 50px 50px 50px;
border: 2px solid black;
border-radius: 20px 20px 20px 20px;
}
p {
font-weight: bold;
font-family: Helvetica, sans-serif;
color: red;
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1">
</head>
<body>
<!-- parallax effect -->
<div class="parallax">
<!-- keep images side by side -->
<div class="flexBox">
<div class="text-block">
<p>Estd. 1984</p>
</div>
<div class="text-block">
<p>Staff 25</p>
</div>
<div class="text-block">
<p>Students 1000</p>
</div>
</div>
</div>
</body>
</html>