Menu
Hi I'm trying to build a site with a jumbotron with a background image, which in itself is not hard:
HTML:
<div class="jumbotron"> ... </div> CSS: (which lies in my custom css file and is loaded after all over 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 this creates a jumbotron with a background image, but I would like to get it to do an effect which I find hard to describe but is seen on this webpage here: http://www.andrewmunsell.com You can see as you scroll the jumbotron content text etc sort of scrolls up faster than the background image. What is this effect called and is it easy to achieve with bootstrap/html/css?
I've had a look at the HTML of the pay but it's a bit too complex for me to follow at the moment.
Thanks, Ben.
EDIT: I tried to get the effect by an example provided by the first answer, which is located at boot ply.
However for me the background image shows up, and then as soon as a scroll even a little bit, the whole image disappears. If I use safari's inertial scroll to try and scroll beyond the top of the page, the background tries to move down into view again, so I think the image is loaded correctly, then as soon as a scroll even a little bit, the height is being manipulated in such away the image is moved totally of screen. Below is my HTML, (a little bit ugly in where tabs are placed but Jekyll put it together by including the Jumbotron header I'm trying to make the parallax effect for, page content, and a 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> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></sc\ ript> <![endif]--> </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> <!-- End of JumboTron --> <div class="container"> PAGE CONTENT HERE <!-- Close the container that is opened up in header.html --> </div> </body> </html> You see where I've included the Javascript near the top and the div of class bg and then the jumbotron.
My CSS is:
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; } 
499
We can add a background image to the jumbotron using the CSS style sheet. Use . background-image : url("image_address") within the stylesheet. Here is an example to add a background image to the jumbotron.
In Bootstrap 5 the jumbotron component is removed in favor of utility classes like . bg-light for the background color and . p-* classes to control padding. I'm a newbie, can somebody give example of how to do that?
Say you want to put an image or two on a webpage. One way is to use the background-image CSS property. This property applies one or more background images to an element, like a <div> , as the documentation explains.
One way to achieve this is using a position:fixed container for the background image and place it outside of the .jumbotron. Make the bg container the same height as the .jumbotron and center the background image:
background: url('/assets/example/...jpg') no-repeat center center; CSS
.bg { background: url('/assets/example/bg_blueplane.jpg') no-repeat center center; position: fixed; width: 100%; height: 350px; /*same height as jumbotron */ 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; } Then use jQuery to decrease the height of the .jumbtron as the window scrolls. Since the background image is centered in the DIV it will adjust accordingly -- creating a parallax affect.
JavaScript
var jumboHeight = $('.jumbotron').outerHeight(); function parallax(){ var scrolled = $(window).scrollTop(); $('.bg').css('height', (jumboHeight-scrolled) + 'px'); } $(window).scroll(function(e){ parallax(); }); Demo
http://bootply.com/103783
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
