"Parallax"
Bootstrap 3.3.0 Snippet by megatela

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <style> .parallax { /* The image used */ background-image: url("http://sirseni.com/demo/huma/images/slider/slider1.jpg"); /* Set a specific height */ min-height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <p>Scroll Up and Down this page to see the parallax scrolling effect.</p> <div class="parallax"></div> <div style="height:300px;background-color:blue;font-size:36px;color:white;"> Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect. </div> </body> </html>

Related: See More


Questions / Comments: