Bootstrap 3 - jumbotron background image effect

Question

Hi I m trying to build a site with a jumbotron with a background image  which in itself is not hard   HTML    lt div class  jumbotron  gt       lt  div gt    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    lt  DOCTYPE html gt   lt html lang  en  gt     lt head gt       lt meta charset  utf-8  gt       lt title gt Hybridisation Recombination and Introgression Detection and Dating lt  title gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt meta name  description  content  Site for the HybRIDS R package for analysing recombination signal in DNA sequences  gt       lt link href   css bootstrap css  rel  stylesheet  gt       lt link href   css bootstrap-responsive css  rel  stylesheet  gt       lt link rel  stylesheet  href  css custom css  type  text css   gt       lt style gt       lt  style gt       lt script src  http   code jquery com jquery-1 10 1 min js  gt  lt  script gt       lt script src  js bootstrap js  gt  lt  script gt       lt script type  text javascript  gt          var jumboHeight       jumbotron   outerHeight            function parallax                var scrolled     window  scrollTop                    bg   css  height    jumboHeight-scrolled     px                        window  scroll function e               parallax                     lt  script gt       lt  -- HTML5 shim  for IE6-8 support of HTML5 elements -- gt       lt  -- if lt IE 9  gt         lt script src  http   html5shim googlecode com svn trunk html5 js  gt  lt  sc  ript gt       lt   endif -- gt     lt  head gt      lt body gt       lt div class  bg  gt  lt  div gt       lt div class  jumbotron  gt           lt div class  row  gt               lt div class  col-lg-4  gt                   lt img src    img HybRIDSlogo png  class  img-rounded  gt               lt  div gt               lt div class  col-lg-8  gt                   lt div class  page-header  gt                       lt h2 gt  Hybridisation Recombination and Introgression Detection and Dating  lt  h2 gt                       lt p gt   lt h2 gt   lt small gt  Easy detection  dating  and visualisation for recombination  introgression and hybridisation events in genomes   lt  small gt   lt  h2 gt   lt  p gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt       lt  -- End of JumboTron -- gt        lt div class  container  gt           PAGE CONTENT HERE       lt  -- Close the container that is opened up in header html -- gt       lt  div gt       lt  body gt   lt  html gt    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

User · Accepted Answer

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

User · Answer

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

User · Answer

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

[html] Bootstrap 3 - jumbotron background image effect

Example: http://bootply.com/103783

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3

Examples related to webpage