Comment créer un effet jumbotron avec une image d'arrière-plan avec Bootstrap ?

Le jumbotron affiche un bloc en haut d'une page web, avec pour objectif d'attirer l'attention de l'utilisateur sur un élément particulier.

Le jumbotron est un composant de Bootstrap. Il affiche un bloc situé en haut de la page d'un site. Ce bloc est plus large que le reste de la page. Le but est d'attirer l'attention de l'utilisateur sur un élément particulier. Ce bloc est gris par défaut, mais il est possible de le modifier grâce au CSS et à JavaScript pour qu'il puisse contenir une image située en arrière-plan.

Un jumbotron est écrit de cette manière en HTML :

<div class=jumbotron>
 <div class=container>
  <div class=fond>
  <h1>Titre</h1>
  <p>Contenu du jumbotron</p>
  </div>
 </div>
</div>

Afin de réaliser ce procédé, l'idée est de créer une <div> avec une classe fond qui contiendra la division qui a comme classe jumbotron. Ce container sera fixé en haut de la page avec un fond qui sera centré et prendra toute la largeur de la page grâce au CSS. En JavaScript, on utilisera la bibliothèque jQuery pour lier une fonction au scroll de la souris dans la page. Cette fonction diminuera la hauteur de la division en fonction de la distance scrollée par la souris, jusqu'à ce que le jumbotron ne soit plus affiché : cela créera un effet parallax. Code CSS :

.fond {
 background: url('image_de_fond.jpg') no-repeat center center;
 position: fixed; /* Le fond est fixé en haut de la page */
 width: 100%; /* Il occupe toute la largeur de l'écran */
 height: 300px; /* On met ici la même hauteur que le jumbotron */
 top:0;
 left:0;
 z-index: -1;
}
.jumbotron {
 margin-bottom: 0px;
 height: 300px;
 color: white; /* Le texte sera affiché en blanc */
 text-shadow: black 0.3em 0.3em 0.3em;
 background:transparent;
}

Code JavaScript :

//Hauteur du jumbotron
var hauterJumbotron = $('.jumbotron').outerHeight();
//Fonction appelée au scroll de la souris
function parallax()
{
//On calcule la distance de scroll, puis on réduit la taille du container du jumbotron en fonction de cette distance.
var scrolled = $(window).scrollTop();
$('.fond').css('height', (hauterJumbotron-scrolled) + 'px');
}
//Ajout de la fonction à l'événement scroll
$(window).scroll(function(e){
parallax();
});

Bootstrap