[Résolu] CSS background

Bonjour,

J'ai un fil d'Ariane sur mon site, comme celui-ci



Il se trouve dans une cellule de CSS Grid.
Je souhaiterais que le vackground-color s'applique uniquement desrrière le texte et pas après.
Voici mon code:

.fil-ariane { width:100%; height: auto; margin: 25wv; padding: 10px;  position: relative; top: 1em;
      padding-left: 5px; grid-column: 1 / 3; grid-row: 1 / 2; }
.fil-ariane-texte {display: block; background-color: rgb(255,255,255,0.8); border-radius: 60em; padding-left: 10px;}

      <div class="wrapper mb-60">
        <div class="fil-ariane">
          <div class="fil-ariane-texte">
            <a href="index.html"><b>Accueil</b></a>&nbsp;&gt;&nbsp;Gite&nbsp;2&nbsp;à&nbsp;8&nbsp;personnes
          </div>
        </div>
        <img class="bloc-image-6x3-c" src="img/bar-gite-8-personnes-bretagne-ti-goudoul-1920x564.jpg" alt="le bar du gite ti Goudoul">
        <div class="bloc-texte-4x2">
          <h1 class="center mb-40">Gite 8 personnes en Bretagne</h1>
          <h2>Visitez un  gite 8 personnes adapté aux vacances en famille ou entre amis.<br>
            Au rez-de-chaussée : découvrez la pièce de vie et la cuisine.<br> 
            À l'étage : profitez de 4 chambres, une salle d'eau, une salle de bain et un espace de jeu intérieur.</h2>
          </div>
      </div>  

Merci pour votre aide.
Cdt

Salut,

Ceci ?

.fil-ariane-texte {
  position: relative;
  padding: 5px 10px;
}
.fil-ariane-texte:before{
  content:'';
  position: absolute;
  top: 0;right: 0;bottom: 0;left: 0;
  background: #fff;
  z-index: -1;
  border-radius: 20px; 
  opacity: 0.6;
}

Modifié par niuxe (29 Feb 2024 - 23:28)

Bonsoir,
Merci pour votre réponse.
Plus de background du coup.
Cdt

Bonjour,
J'ai fini par trouver la solution: mettre un display: inline-block sur fil-ariane-texte.
Cdt