Image de fond du jumbotron Bootstrap non responsive

Question

Je suis assez nouveau sur Bootstrap et j'ai du mal à faire en sorte que l'image d'arrière-plan de mon jumbotron s'adapte correctement sans montrer l'arrière-plan blanc. J'utilise Bootstrap Fixed Nav en haut de la page, Jumbotron (image d'arrière-plan) au milieu, et Sticky Footer. Lorsque je teste sur Google Chrome pour voir si la mise en page est correcte, il semble que l'image ne s'étire pas jusqu'au haut du pied de page, ce qui montre l'arrière-plan blanc. Comment puis-je faire en sorte que l'image d'arrière-plan s'adapte correctement pour tous les appareils?

HTML:

            Basculer la navigation

          JasonMurray

            Accueil
            À propos
            Portfolio
            Contact

        Développeur Web Front-End
        Je suis Jason Murray, développeur Web Front-End qui aime écrire des codes propres et créer des designs Web simplistes.
        Travaux récents

        Droits d'auteur © 2016 Conception Web de Jason Murray. Tous droits réservés

CSS:

.jumbotron {
  background: url("../img/lucho-49.jpg") no-repeat center center;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

Answer 1

Il y a une marge en bas de cette classe jumbotron, donc supprimez margin:

.jumbotron {
  margin-bottom: 0;
}

Voici le lien fiddle: lien fiddle

Answer 2

L'image n'est pas étirée jusqu'au haut du pied de page car à cause de la propriété prédéfinie margin-bottom: 30px; de la jumbotron.

Dans votre code CSS, apportez les modifications suivantes :

nav + .jumbotron {
  margin-bottom: 0;
  background: url("../img/lucho-49.jpg") no-repeat center center;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

Si vous ajoutez margin-bottom: 0; dans votre sélecteur .jumbotron, cela ne fonctionnera pas en raison de la spécificité. Par conséquent, j'ai augmenté la spécificité en ajoutant le Sélecteur de frère adjacent, nav + .jumbotron pour remplacer vos propriétés CSS par les propriétés CSS prédéfinies de la bootstrap .jumbotron.