Partage
  • Partager sur Facebook
  • Partager sur Twitter

Superposition de deux images en flexbox

Sujet résolu
17 juillet 2016 à 0:57:43

Bonsoir,

Pour un projet j'utilise les flexbox (parce que c'est tout simplement génial pour que les éléments ne partent pas dans tout les sens). Donc en faite j'ai deux images, une image en arrière plan et une autre image. J'aimerais que la deuxième images se positionne par dessus la première.
J'ai déjà essayé d'utiliser les position absolute et les z-index pour le positionnement.
Mais ce n'est pas idéal.

Auriez-vous une solution ?

On m'a conseillé de mettre display flex sur une div parent. de mes images, j'ai donc fais ce code : 

Code HTML : 

<body> <!-- J'applique sur le body, un background color noir. pour donner un effet de transparence sur l'image "background". !-->
    <div class="container">
        <img src="img/background.jpg" class="me_background">
        <img src="img/me.jpg" class="me_picture">
    </div>
</body>



Code CSS : 

body{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
    background-color: #000;
}

.container{
  display:flex;
  width:100%;
  height:100%;
}

.me_background{
    width: 100%;
    height: 643px;
    opacity: 0.4;
}

    .me_picture{
        width: 250px;
        height: 250px;
        z-index: 3;
    }


En faite j'aimerais que l'img avec la classe me_picture soit centré au millieu de l'img me_background :D



  • Partager sur Facebook
  • Partager sur Twitter
17 juillet 2016 à 11:43:49

Bonjour,

pour superposer deux éléments, il n'y a en effet que position: absolute. Tu pourrais nous mettre une page en ligne pour qu'on voie le code dans son milieu naturel ? Comme tout tourne autour d'images, et que nous ne les avons pas, nous ne pouvons pas reproduire ton problème.

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Anonyme
17 juillet 2016 à 12:28:48

Bonjour,

Je ne sais pas qui t'as conseillé d'utiliser flexbox pour se faire chevaucher deux éléments, mais c'est carrément l'inverse de ce que propose cette propriété.

Flexbox sert justement à ce que les élements soient flexibles entre eux et ne se chevauchent pas. Et si c'est le cas, tu peux utiliser la propriété flex-wrap pour que les éléments ne soient pas serrés comme des sardines (et là je t'ai mis la musique dans la tête pour la journée, désolé :lol:).

Mieux vaut travailler avec du classique et des marges pour une image sur une image. Voici un exemple de ce que tu pourrais faire (merci de ne pas critiquer mes talents médiocres de designer ^^).

-
Edité par Anonyme 17 juillet 2016 à 12:29:27

  • Partager sur Facebook
  • Partager sur Twitter
11 octobre 2018 à 0:09:44

Bonjour,

quasiment la même problématique de mon coté, je cherche à ajouter une div centrée par dessus mon image (avec du texte etc) et mon formateur s'est presque moqué de ceux qui ont utilisé "position: absolute" en disant que c'est une vielle manière de faire ça et qu'on peut faire mieux avec flexbox par exemple.

Auriez vous une autre manière de faire ? (flexbox ou autre)

  • Partager sur Facebook
  • Partager sur Twitter
11 octobre 2018 à 0:29:32

Hello,

Pourquoi poser cette question dans un sujet de 2016 ???

Flexbox c'est ça -> https://la-cascade.io/flexbox-guide-complet/ 

Demande à ton formateur à quoi sa sert et de faire une démonstration pour y parvenir sans créer une usine à gaz. 

Inspecte le code des sites qui superposes 2 <viv> ou autre....

  • Partager sur Facebook
  • Partager sur Twitter
11 octobre 2018 à 2:29:11

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. Me contacter par MP si besoin.

  • Partager sur Facebook
  • Partager sur Twitter