Bonjour

J'ai un exercice de reproduction de maquette. Je dois ajouter du texte cliquable sur une image en background. J'avais d'abord passé cette image en background-image en css, mais elle avait une vilaine marge sur la droite que je n'arrivais pas à retirer. Je l'ai donc passé dans mon html en position relative, puis mes texte par dessus en absolute. Ces zones de texte devrait rester fixes, le "Cliquez ici" devrait toujours être sur le carré vert de l'image. Pb, en responsive bien sûr, mon image rétrécit mais mon texte lui reste statique. Résultat... c'est pas la bonne solution!

Ma question est donc : comment traiter cette image et ces textes pour que l'ensemble réponde de la même façon sur toutes les tailles d'écran?

img 1 : le résultat attendu

img 2 : la triste réalité ... );

<div id="resa" class="col-4 g-0 position-relative">
                        <img src="images/fond-book.png" class="img-fluid">
                        <div id="resaTexte" class="position-absolute">
                            <p  class="text-uppercase fw-bold p-2">reservez <br> notre
                                <br>catalogue
                            </p>
                            <a id="clic" href="#" class=" text-decoration-none text-light fw-bold small position-absolute"
                                data-bs-toggle="modal" data-bs-target="#boiteModale">Cliquez <br>ICI</a>
                        </div>
                        
                    <div id="resaListe">
                        <ul class="list-unstyled mx-2">
                            <li class="fw-bold py-2"><a href="#" class="text-decoration-none text-dark">Références</a>
                            </li>
                            <li class="small"><a href="#" class="text-decoration-none text-dark">Expositions</a></li>
                            <li class="small"><a href="#" class="text-decoration-none text-dark">Hôtels</a></li>
                            <li class="small"><a href="#" class="text-decoration-none text-dark">Restaurants et Bars</a>
                            </li>
                            <li class="small"><a href="#" class="text-decoration-none text-dark">Revente</a></li>
                            <li class="small"><a href="#" class="text-decoration-none text-dark">Salons et Spas</a></li>
                        </ul>
                    </div>
                </div>

Merci par avance!

« J'avais d'abord passé cette image en background-image en css, mais elle avait une vilaine marge sur la droite »

Bonjour. Deux propriétés CSS permettent de mieux définir le background

- background-position

- background-size

Avec ça, en général, on règle toutes les situations.

Bonsoir et merci

J'essaierai ça demain