Hi, I am trying to create a website with jumbotron with a background image, which in itself is not difficult:
HTML:
<div class="jumbotron"> ... </div>
CSS: (which lies in my custom css file and loads after all CSS).
.jumbotron { margin-bottom: 0px; background-image: url(../img/jumbotronbackground.jpg); background-position: 0% 25%; background-size: cover; background-repeat: no-repeat; color: white; text-shadow: black 0.3em 0.3em 0.3em; }
Now it creates a jumbotron with a background image, but I would like to make it make an effect that is difficult for me to describe, but it is shown on this web page here: http://www.andrewmunsell.com You can see how you scroll the content text jumbotron etc., scroll faster than background image. What is called this effect and is it easy to achieve with bootstrap / html / css?
I looked at the HTML payment code, but for me it is too complicated.
Thanks Ben.
EDIT: I tried to get the effect using the example provided by the first answer, which is in the boot layer.
However, a background image appears for me, and then, as soon as I scroll a little more, the whole image disappears. If I use the safari inertial scroll to try to scroll the page at the top of the page, the background will try to switch to view mode again, so I think the image is loaded correctly, then as soon as I scroll a little more, the height manipulating in this way, the image completely moves around the screen . Below is my HTML code (a bit ugly where the tabs are located, but Jekyll put it together by including the Jumbotron header that I am trying to make for the parallax effect, page content and page footer.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hybridisation Recombination and Introgression Detection and Dating</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Site for the HybRIDS R package for analysing recombination signal in DNA sequences"> <link href="/css/bootstrap.css" rel="stylesheet"> <link href="/css/bootstrap-responsive.css" rel="stylesheet"> <link rel="stylesheet" href="css/custom.css" type="text/css"/> <style> </style> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="js/bootstrap.js"></script> <script type='text/javascript'> var jumboHeight = $('.jumbotron').outerHeight(); function parallax(){ var scrolled = $(window).scrollTop(); $('.bg').css('height', (jumboHeight-scrolled) + 'px'); } $(window).scroll(function(e){ parallax(); }); </script> </head> <body> <div class="bg"></div> <div class="jumbotron"> <div class="row"> <div class="col-lg-4"> <img src="./img/HybRIDSlogo.png" class="img-rounded"> </div> <div class="col-lg-8"> <div class="page-header"> <h2> Hybridisation Recombination and Introgression Detection and Dating </h2> <p> <h2> <small> Easy detection, dating, and visualisation for recombination, introgression and hybridisation events in genomes. </small> </h2> </p> </div> </div> </div> </div> <div class="container"> PAGE CONTENT HERE </div> </body> </html>
You see where I turned on Javascript next to the top and div of the bg class and then jumbotron.
My CSS:
body { background-color: #333333; padding-bottom: 100px; } .bg { background: url('../img/carouelbackground.jpg') no-repeat center center; position: fixed; width: 100%; height: 350px; top:0; left:0; z-index: -1; } .jumbotron { margin-bottom: 0px; height: 350px; color: white; text-shadow: black 0.3em 0.3em 0.3em; background: transparent; }