Affichage de 2 fonds superposés

Bonjour,

J’utilise actuellement des card de mdbootstrap pour afficher des informations. Celles-ci sont composées d'un fond et d'un texte par dessus.
Le soucis, c'est que les images que je compte mettre n'ont pas forcément la taille de la carte. J'ai donc pensé à afficher la même image en fond mais floutée pour combler l'espaces blanc derrière l'image principale.
J'ai essayé tout bêtement de superposer les 2 background (background: url(...), url(...)), jusque là tout va bien. Le soucis c'est que si j'applique le filter blur, il s'applique sur toute la div, et rend flou même le texte. Est-ce que vous auriez une solution pour flouter que l'image de fond ?

Pour shématiser, ça donnerait : Une image de fond flou, par dessus la même image mais en net, et du texte par dessus.

Voilà le code de la card (le css est directement dedans) :

<div class="card card-image" style="background: url(<?php echo $projets[$nbProjets]['image'] ?>) no-repeat center white;">

              <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                <div style="margin: 0 auto">
                  <h5 class="text" style="color: #a5a2ff"><?php echo $projets[$nbProjets]['icone'] ?> <?php echo $projets[$nbProjets]['lieu'] ?></h5>
                  <h3 class="card-title pt-2"><strong><?php echo $projets[$nbProjets]['nom'] ?></strong></h3>
                  <p><?php echo $projets[$nbProjets]['description_courte'] ?></p>
                  <a href="Projets.php?p=<?php echo $nbProjets ?>" class="btn btn-deep-purple"><i class="fas fa-clone left"></i> Acceder au projet</a>
                </div>
              </div>
            </div>

Merci pour votre aide !

Il y a une propriété qui est faite pour ça : backdrop-filter
Malheureusement elle est encore mal reconnue.
Modifié par Alainpre (21 Feb 2020 - 13:40)

Bonjour,

EDIT: quand tu écris que ton image n'a pas forcément la même taille, tu veux dire pas la même largeur ou bien pas les mêmes proportions (ratio largeur/hauteur) ?
Tu peux jouer avec max-width: 100%; ou background-size: contain OU cover;
edit2: exemple le reset anti-débordement de KNACSS

s'il faut avoir 2 images de fond sur 2 éléments distincts parce que l'un des 2 reçoit un traitement spécial, je ne vois que l'utilisation d'un pseudo-élément, genre :

.element { position: relative; }

.element::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* ou width: 100% ? */
  background-image: url(truc.jpg);
}

Si c'est pas bien positionné, tu peux jouer avec opacity sur chacun pour voir ce qu'il se passe le temps de déboguer
Modifié par Felipe (21 Feb 2020 - 14:36)

Felipe a écrit :
Bonjour,

EDIT: quand tu écris que ton image n'a pas forcément la même taille, tu veux dire pas la même largeur ou bien pas les mêmes proportions (ratio largeur/hauteur) ?
Tu peux jouer avec max-width: 100%; ou background-size: contain OU cover;
edit2: exemple le reset anti-débordement de KNACSS

s'il faut avoir 2 images de fond sur 2 éléments distincts parce que l'un des 2 reçoit un traitement spécial, je ne vois que l'utilisation d'un pseudo-élément, genre :

.element { position: relative; }

.element::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* ou width: 100% ? */
  background-image: url(truc.jpg);
}

Si c'est pas bien positionné, tu peux jouer avec opacity sur chacun pour voir ce qu'il se passe le temps de déboguer

Merci pour le code !
J'ai essayé en adaptant un peu, mais j'ai un autre soucis.
En rajoutant le code que tu m'a mis, j'ai l'image en fond qui est bien floutée (dans le ::before), mais la première image ne s'affiche pas. J'ai essayé de jouer avec les z-index, et malgré le fait que j'ai mis 99 à la #card, et -1 à l'autre, elle ne s'affiche pas.
(Je précise que le z-index: -1 est nécessaire sinon, l'image se place par dessus d'autres éléments).

Voilà le code avec les rajouts

<div class="container-fluid" style="padding: 40px" id="Projets">
  <div class="row">
    <div class="col-12">
      <div class="card element1" style="padding: 10px; margin-right:-15px; margin-left: -15px">
        <div class="row">
          <div class="col-12" style="text-align: center; margin-top: 20px; margin-bottom: 20px">
            <h2 class="card-title" style="font-weight: bold; font-style: sans-serif;font-variant: small-caps; color: #331177;">Projets</h2>
          </div>
        </div>

        <!-- Principal -->
        <div class="row" style="margin-bottom:10px">
          <div class="col-12">

            <div class="card card-image" id="card-1">

              <style>
              #card-1 { position: relative;
              background: url(<?php echo $projets[$nbProjets]['image'] ?>) no-repeat center;
              z-index: 99;
               }

              #card-1::before {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0; /* ou width: 100% ? */
                background: url(<?php echo $projets[$nbProjets]['image'] ?>) ;
                z-index: -1;
                filter: blur(5px);
              }

              </style>

              <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                <div style="margin: 0 auto">
                  <h5 class="text" style="color: #a5a2ff"><?php echo $projets[$nbProjets]['icone'] ?> <?php echo $projets[$nbProjets]['lieu'] ?></h5>
                  <h3 class="card-title pt-2"><strong><?php echo $projets[$nbProjets]['nom'] ?></strong></h3>
                  <p><?php echo $projets[$nbProjets]['description_courte'] ?></p>
                  <a href="Projets.php?p=<?php echo $nbProjets ?>" class="btn btn-deep-purple"><i class="fas fa-clone left"></i> Acceder au projet</a>
                </div>
              </div>
            </div>

          </div>
        </div>

Jean-Pierre-Bruneau a écrit :
Tes PHP echo ils envoient le chemin de l'image genre

meslogos/limage.jpg

ou

<img src="meslogos/limage.jpg" />

parce-que l'url du css il aura un problème non ? ou ce sont les images du HTML qui ont un problème...

Aucun soucis avec l'affichage des image !
Les echo en php envoient uniquement le chemin vers l'image. C'est pour ça que j'ai mis le style de la card juste en dessous et pas dans un fichier à part.
Là pour l'instant, le seul soucis que j'ai c'est que le fond qui doit s'afficher devant s'affiche derrière malgré le z-index à 999
Modifié par Raph34 (26 Feb 2020 - 09:11)