Bonjour,

Je voudrais reproduire cette structure pour mon site.

Voici mon code. Vous obtiendrez ça.

Pour commencer, que pensez-vous des imbrications des éléments et de l'utilisation du système de grille ?

Ensuite, je voudrais savoir comment faire pour que le texte de la deuxième section soit par dessus la première section, c'est-à-dire avoir le texte qui s'affiche sur une image en fond. Vous avez un exemple sur le site de blablacar. On peut voir que lorsque l’écran est large, "Et vous, qui allez-vous retouver ?" est par dessus l'image. Lorsqu'on réduit la fenêtre, le texte se place en dessous.

Je vous remercie pour votre aide.

Bonjour,

En dessous de ton header tu fait un jumbotron tu colle ton image en background de celui-ci, et tu englobe ton texte et ton bouton dedans.

Merci pour ta réponse, mais le problème reste le fait que lorsqu'on réduit la taille de la fenêtre, le texte reste sur l'image, masquant celle-ci.

Je voudrais qu'il se place en dessous dans ce cas.

-
Edité par Awbro 23 avril 2019 à 20:34:46

Effectivement là à mon niveau sur bootstrap 4 je bloque bien qu'il doit y avoir une fonction pour le faire.

Mais si tu veut je te dit comment tricher

un jumbotron dedans tu met ton texte tu rajoute a tes class une class  text1. (par exemple)

tu duplique ton élément text1 tu le colle sous ton jumbotron avec une class text2.

Le texte du jumbotron tu ne le touche pas, le doublon text2 (hors du contenair jumboton) lui tu le met en display:none;

tu rajoute une règle @média pour 768px

en gros en css ca donnerais ceci :

.jumbotron{
                    background: url("../assets/img/1.jpg") no-repeat fixed center;
                    margin: 0;
                }
                .text2{
                    display: none;
                }

                @media screen and (max-width: 764px) {
                    .text1{
                        display: none;
                    }
                    .text2{
                        display: block;
                    }
                }