Bootstrap 3 - jumbotron background image effect

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;
}

Example: http://bootply.com/103783

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

After inspecting the sample website you provided, I found that the author might achieve the effect by using a library called Stellar.js, take a look at the library site, cheers!

I think what you are looking for is to keep the background image fixed and just move the content on scroll. For that you have to simply use the following css property :

background-attachment: fixed;

Bootstrap 3 - jumbotron background image effect

Example: http://bootply.com/103783

Related

Recent Posts