I want that the text which is over the image goes under the header when I scroll it down but it doesn't and I don't know how to do it. I added parallax effect to it but the text is going above the header which needs to go under the header.
Please tell me what and where is the problem and how to resolve it. Here is the html and css code:-
/*This is for links*/
a{text-decoration: none;
color: Black;}
div#sub{display: inline;
color: #339900;}
ul {list-style-type: none;
background: #4caf50 ;
margin: 0;
padding: 0;
overflow: hidden;}
li {float:left;}
li a{
display: block;
text-align:left;
padding:16px;
color: white;
text-decoration: none;}
li a:hover {
background-color: white;
color: black;}
/*This is the end*/
/*This is for parallax scrolling*/
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('images/main1.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
/*This is the end*/
/*This is for header*/
body {
margin: 0;
font-family: Arial;}
.top-container {
background-color: white;
padding: 0px;
text-align: left;}
.content {
padding-top: 14px;}
.header {
padding: 0px 0px;
background: #4caf50;
color: #4caf50;}
.sticky {
position: fixed;
top: 0;
width: 100%;}
.sticky + .content {
padding-top: 64px;}
/*This is the end*/
/*This is for text*/
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 120px;}
.sub-text{ position: absolute;
top: 63%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 40px;
font-family: apple chancery;}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lets Save Pets</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body style=background:white>
<div class="top-container">
<a href="index.html"><font face="lucida handwriting" size="7">Letsavepet</font><div id="sub"><font face="lucida handwriting" size="5">.com</font></div></a>
</div>
<div class="header" id="myHeader">
<ul>
<li><a href="news.html">News</a> </li>
<li><a href="joinus.html">Join Us</a> </li>
<li><a href="gallery.html">Gallery</a> </li>
<li><a href="aboutus.html">About Us</a> </li>
</ul>
</div>
<div class="text"><b>LETS SAVE PETS</b></div>
<div class="sub-text"><b>We need you in this mission !</b></div>
<div class="parallax"></div>
<div class="content" style="height:100%;background-color:white;">
<h1><u>Saving a life is easier than you think.</u></h1>
<p><font size="5">
“You can do it!” Every day, we say those four magical words to people around the globe who
want to help animals in need but are unsure of their abilities. With some friendly encouragement
and guidance, you’ll be amazed at what you can accomplish.
<h2>Helping to save animals</h2>
Each of us can help bring about a time when there are No More Homeless Pets. In fact, that’s just
what it is going to take — every person reading this article committing to do just a little bit to
reach this goal. Sure, many of us think we can’t make a difference for one reason or another, but
the truth is that no matter how little time, money or experience you have, you can still save
an animal’s life. It’s easier than you think, and makes you feel good, too.
<br /> <br />
We’ve heard from so many of you who want to help but aren’t sure how, so we’re going to tell you
about simple ways that you can make a huge impact. It’s time to do all we can to save the lives of
homeless animals. They’re counting on us — and we know <b>you can do it!
</b></font></p>
<hr />
<center>Find us on <a id="link" href="https://www.facebook.com/letsavepet/" target="_blank">
<img src="images/facebook.jpg" width="20" height="20" /></a></center><hr />
<center><pre><font size="3">All Right Reserved® Copyright©</font></pre></center>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</body>
</html>Simple. Just add z-index: 100 to class .sticky
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 100; /*like this*/
}
Look (Also, i changed the img background, you can ignore it)
/*This is for links*/
a{text-decoration: none;
color: Black;}
div#sub{display: inline;
color: #339900;}
ul {list-style-type: none;
background: #4caf50 ;
margin: 0;
padding: 0;
overflow: hidden;}
li {float:left;}
li a{
display: block;
text-align:left;
padding:16px;
color: white;
text-decoration: none;}
li a:hover {
background-color: white;
color: black;}
/*This is the end*/
/*This is for parallax scrolling*/
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('https://picsum.photos/1800/1600');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
/*This is the end*/
/*This is for header*/
body {
margin: 0;
font-family: Arial;}
.top-container {
background-color: white;
padding: 0px;
text-align: left;}
.content {
padding-top: 14px;}
.header {
padding: 0px 0px;
background: #4caf50;
color: #4caf50;}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.sticky + .content {
padding-top: 64px;}
/*This is the end*/
/*This is for text*/
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 120px;}
.sub-text{ position: absolute;
top: 63%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 40px;
font-family: apple chancery;}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lets Save Pets</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body style=background:white>
<div class="top-container">
<a href="index.html"><font face="lucida handwriting" size="7">Letsavepet</font><div id="sub"><font face="lucida handwriting" size="5">.com</font></div></a>
</div>
<div class="header" id="myHeader">
<ul>
<li><a href="news.html">News</a> </li>
<li><a href="joinus.html">Join Us</a> </li>
<li><a href="gallery.html">Gallery</a> </li>
<li><a href="aboutus.html">About Us</a> </li>
</ul>
</div>
<div class="text"><b>LETS SAVE PETS</b></div>
<div class="sub-text"><b>We need you in this mission !</b></div>
<div class="parallax"></div>
<div class="content" style="height:100%;background-color:white;">
<h1><u>Saving a life is easier than you think.</u></h1>
<p><font size="5">
“You can do it!” Every day, we say those four magical words to people around the globe who
want to help animals in need but are unsure of their abilities. With some friendly encouragement
and guidance, you’ll be amazed at what you can accomplish.
<h2>Helping to save animals</h2>
Each of us can help bring about a time when there are No More Homeless Pets. In fact, that’s just
what it is going to take — every person reading this article committing to do just a little bit to
reach this goal. Sure, many of us think we can’t make a difference for one reason or another, but
the truth is that no matter how little time, money or experience you have, you can still save
an animal’s life. It’s easier than you think, and makes you feel good, too.
<br /> <br />
We’ve heard from so many of you who want to help but aren’t sure how, so we’re going to tell you
about simple ways that you can make a huge impact. It’s time to do all we can to save the lives of
homeless animals. They’re counting on us — and we know <b>you can do it!
</b></font></p>
<hr />
<center>Find us on <a id="link" href="https://www.facebook.com/letsavepet/" target="_blank">
<img src="images/facebook.jpg" width="20" height="20" /></a></center><hr />
<center><pre><font size="3">All Right Reserved® Copyright©</font></pre></center>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</body>
</html>