html - Parallax effect not working on certain pages -
i making website , have run little snag. 1 of pages has parallax effect on it. tried apply same effect page(third page) , reason not work on page. wondering if knew why method not working?
css , html
body{ background-color: teal; font-family:orbitron; color:white; } .fa-stack-overflow{ color: #f48024 } .fa-github{ color:rgb(102,43,129); } .fa-linkedin{ color:rgb(0,127,178); } .fa-facebook-official{ color:rgb(59, 89, 153); } .nav-pills{ font-size: 1.7em; background-color: none; margin-bottom: 10%; } .block{ background-color: #337ab7; padding:10px; width:50%; margin-right: auto; margin-left: auto; border-radius:5px; } h1{ padding:0; margin-top: 0px; font-size: 5.0em; } .btn-default{ font-size:1.7em; color:#337ab7; } .pageone{ background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); background-repeat: none; background-size: cover; height: 1000px; } /* parallax effect start */ .pageone, .pagethree{ position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } /* parallax effect end */ .pagetwo{ background: teal; background-repeat: none; background-size: cover; height: 400px; padding-top: 5%; } .pagetwoblock{ border-radius:5px; } p{ font-size: 1.8em; } .me{ height: 850px; display:block; margin-right: auto; margin-left: auto; } .pagethree{ background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); background-repeat: none; background-size: cover; height: 1000px; padding-top:5%; } .container{ width:80%; margin:auto; overflow:auto; } section{ padding:20px 0; overflow:hidden; } #gallery{ list-style: none; margin: 0; padding: 0; width: 100%; } #gallery li{ display: block; float: left; width: 23%; cursor: pointer; border: 5px; box-sizing: border-box; margin: 0 12px 7px 0; position: relative; } #gallery img{ width:100%; border-radius:5% } .pagefour{ background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); background-repeat: none; background-size: cover; height: 1000px; padding-top:5%; }<!doctype html> <html> <head> <title>daniel's portfolio | welcome</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <script src="main.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=orbitron" rel="stylesheet"> </head> <body> <div class="pageone text-center"> <ul class = "nav nav-pills"> <li> <a href="#">daniel collins</a> </li> <li class="pull-right"> <a href="#p4">contact me</a> </li> <li class="pull-right"> <a href="#p3">portfolio</a> </li> <li class="pull-right"> <a href="#p2">about me</a> </li> </ul> <div class="block text-center"> <h1>daniel's portfolio website</h1> <h2>various web projects</h2> </div> <div class = "btnlist text-center"> <a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>stack overflow</a> <a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>github</a> <a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>linkedin</a> <a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>facebook</a> </div> </div> <div class= "pagetwo text-center" id="p2"> <div class= "pagetwoblock"> <div class="row"> <div class ="text-center"> <h1>daniel collins</h1> <p class"text-center"> i’m web developer , designer living in jacksonville, florida, united states. spend days hands in many different areas of web development end programming (php, c#, java) front end engineering (html, css, , jquery/javascript), digital accessibility, user experience , visual design. </p> </div> </div> </div> </div> <div class= "pagethree" id="p3"> <header> <div class="block text-center"> <h1 class = "logo">portfolio</h1> </div> </header> <section> <div class="container> <h1 id="heading">all projects</h1> <ul id="gallery"> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li> </ul> </div> </section> </div> <div class= "pagefour text-center" id="p4"> </div> </body> </html>
please check this. background-attachment: fixed; missing other divs.
body{ background-color: teal; font-family:orbitron; color:white; } .fa-stack-overflow{ color: #f48024 } .fa-github{ color:rgb(102,43,129); } .fa-linkedin{ color:rgb(0,127,178); } .fa-facebook-official{ color:rgb(59, 89, 153); } .nav-pills{ font-size: 1.7em; background-color: none; margin-bottom: 10%; } .block{ background-color: #337ab7; padding:10px; width:50%; margin-right: auto; margin-left: auto; border-radius:5px; } h1{ padding:0; margin-top: 0px; font-size: 5.0em; } .btn-default{ font-size:1.7em; color:#337ab7; } .pageone{ background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); background-repeat: none; background-size: cover; height: 1000px; } /* parallax effect start */ .pageone, .pagethree{ position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } /* parallax effect end */ .pagetwo{ background: teal; background-repeat: none; background-size: cover; height: 400px; padding-top: 5%; background-attachment: fixed; } .pagetwoblock{ border-radius:5px; } p{ font-size: 1.8em; } .me{ height: 850px; display:block; margin-right: auto; margin-left: auto; } .pagethree{ background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); background-repeat: none; background-size: cover; height: 1000px; padding-top:5%; background-attachment: fixed; } .container{ width:80%; margin:auto; overflow:auto; } section{ padding:20px 0; overflow:hidden; } #gallery{ list-style: none; margin: 0; padding: 0; width: 100%; } #gallery li{ display: block; float: left; width: 23%; cursor: pointer; border: 5px; box-sizing: border-box; margin: 0 12px 7px 0; position: relative; } #gallery img{ width:100%; border-radius:5% } .pagefour{ background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); background-repeat: none; background-size: cover; height: 1000px; padding-top:5%; background-attachment: fixed; }<!doctype html> <html> <head> <title>daniel's portfolio | welcome</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <script src="main.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=orbitron" rel="stylesheet"> </head> <body> <div class="pageone text-center"> <ul class = "nav nav-pills"> <li> <a href="#">daniel collins</a> </li> <li class="pull-right"> <a href="#p4">contact me</a> </li> <li class="pull-right"> <a href="#p3">portfolio</a> </li> <li class="pull-right"> <a href="#p2">about me</a> </li> </ul> <div class="block text-center"> <h1>daniel's portfolio website</h1> <h2>various web projects</h2> </div> <div class = "btnlist text-center"> <a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>stack overflow</a> <a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>github</a> <a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>linkedin</a> <a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>facebook</a> </div> </div> <div class= "pagetwo text-center" id="p2"> <div class= "pagetwoblock"> <div class="row"> <div class ="text-center"> <h1>daniel collins</h1> <p class"text-center"> i’m web developer , designer living in jacksonville, florida, united states. spend days hands in many different areas of web development end programming (php, c#, java) front end engineering (html, css, , jquery/javascript), digital accessibility, user experience , visual design. </p> </div> </div> </div> </div> <div class= "pagethree" id="p3"> <header> <div class="block text-center"> <h1 class = "logo">portfolio</h1> </div> </header> <section> <div class="container> <h1 id="heading">all projects</h1> <ul id="gallery"> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li> <li><a href=""></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li> </ul> </div> </section> </div> <div class= "pagefour text-center" id="p4"> </div> </body> </html>
Comments
Post a Comment