Bonjour,

Je bloque sur un point. J'aimerais faire comme sur l'image plus bas.

Le cadre bleu représente une image de profil. Je souhaite qu'elle soit au premier plan par rapport au conteneur d'informations, mais décalée de ce même conteneur, vers le haut et la droite.

Je réussi à placer mon image comme je le souhaite avec HTML et CSS, mais lorsque je change la taille de l'écran, le rendu n'est plus du tout le même.

J'ai essayé avec Bootstrap 5 mais je ne trouve pas vraiment la solution.

Si quelqu'un a une idée pour placer cet élément, et rendre la page responsive, je suis preneur !

Bonsoir, une position absolue pour le cadre bleu avec un parent référent en position relative.

Pour le responsive utiliser les media queries pour la modification dans les différentes vue (mobile, tablette, desktop)

Quel est le code que vous avez écrit?

@sakoner Bonsoir, aider c'est bien, le faire dans les règles du forum c'est mieux. Merci d'utiliser le bouton code </> de la barre d'outil du forum pour poster du code.

Voici le code que j'ai testé :

HTML

<main>
        <section class="container-fluid">
            <div class="row banner_Forest">
                <div class="col-12 col-md-4"></div>
                <div class="col-12 col-md-4 personalDetails">
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="mainDetails">
                                <h2>Prénom Nom</h2>
                                <h3>Développeur Web</h3>
                            </div>
                            <ul class="contactDetails">
                                <li>
                                    <h3>Numéro de téléphone :</h3>
                                    <h4>XX XX XX XX XX</h4>
                                </li>
                                <li>
                                    <h3>Email :</h3>
                                    <h4>xxx@gmail.com</h4>
                                </li>
                                <li>
                                    <h3>Adresse :</h3>
                                    <h4>Chemin de là-bas, France</h4>
                                </li>
                                <li>
                                    <h3>Date de naissance :</h3>
                                    <h4>01 Janvier 1998</h4>
                                </li>
                            </ul>
                        </div>
                        <div class="col col-md-6">
                            <img src="assets/png/person.png" alt="mainImage" class="mainImage">
                        </div>
                    </div>

                </div>
                <div class="col-12 col-md-4"></div>
            </div>
        </section>

CSS

ul{
    padding: 0;
}

li{
    list-style-type: none;
}

.banner_Forest {
    height: 582px;
    background: rgba(0, 0, 0, 0.2) url(../png/forest_banner.jpg);
    background-size: cover;
    background-position: 0px 100%;
    background-blend-mode: darken;
}

.mainImage {
    width: 60%;
}

.personalDetails {
    margin: auto;
    height: 60%;
    font-family: 'Avenir Light', sans-serif;
    color: rgb(24, 33, 83);
    background-color: #f1f1f1;
}

.mainDetails {
    text-shadow: 2px 2px 2px #aaa;
}

.personalDetails h2 {
    font-size: 1.9em;
    margin-left: -2px;
    margin-bottom: 2px;
}

.personalDetails h3 {
    font-size: 1em;
    font-weight: bold;
}

.personalDetails h4 {
    font-size: 0.9em;
}

.contactDetails {
    margin-bottom: 2px;
}

Ce que ça fait :