IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Afficher une image sur une autre


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Femme Profil pro
    développeur débutant
    Inscrit en
    Février 2017
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : développeur débutant

    Informations forums :
    Inscription : Février 2017
    Messages : 12
    Par défaut Afficher une image sur une autre
    Bonjour,

    j'ai un souci de positionnement d'une image sur une autre.

    En effet, je souhaiterais centrer une image de type logo sur une image de fond de header.

    voici mon code html:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <header>
            <div class="logo">
            </div>
    </header>

    et mon code css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    header
    {
    background-image: url(...);
        background-size: 100% 100%;
        height: 300px; 
        display: block;
    }
     
    .logo
    {	
    	background-image: url(...);
    	background-repeat: no-repeat;
        background-position: center; 
        display: none;
        padding-left: 150px;  
     
    }
    or cela n'affiche pas le logo...
    Il me semble qu'il y a une histoire de position absolute mais j'ai essayé plusieurs manières de faire avec cette position absolute mais rien à faire le logo ne s'affiche pas sur l'image de fond du header...

    Je vous remercie par avance pour votre aide.

  2. #2
    Membre émérite
    Homme Profil pro
    Retraité informatique
    Inscrit en
    Juin 2012
    Messages
    519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juin 2012
    Messages : 519
    Par défaut
    Et avec un z-index ça marcherait surement mieux ....

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .logo
    {	
    ...
        display: none;
    Ceci explique cela...


    De plus, le div n'est pas dimensionné.
    Et pourquoi mettre le logo en background ?

  4. #4
    Membre émérite
    Homme Profil pro
    Retraité informatique
    Inscrit en
    Juin 2012
    Messages
    519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juin 2012
    Messages : 519
    Par défaut
    Arrg ... bien vu Jreaux62!, Trop vite répondu pour moi comme toujours.
    Mais je pense que le Z-index serait sa solution.
    Quant à Display:none Là je ne comprends pas son code.
    Mais une position:absolute avec z-index de 999 et la div devrait apparaître, background ou img peu importe, sauf la lourdeur du code..

  5. #5
    Invité
    Invité(e)
    Par défaut
    1/ Une solution :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <header>
      <div class="logo"></div>
    </header>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    header {
      background: url('http://image.noelshack.com/fichiers/2016/38/1474302676-fond-ecran-plage-de-reve-beach-wallpaper.jpg') center center no-repeat;
      background-size:cover;
      height: 300px; 
      display:flex;
      align-items:center; /* centrage vertical du logo*/
    }
     
    .logo {
      background: url('https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201') center center no-repeat; background-size:auto 100%;
      width: 100px;
      height: 100px;
      margin:0 auto;
    }

    2/ celle plus classique :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <header>
      <div class="logo">
        <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201" />
      </div>
    </header>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    header {
      background: url('http://image.noelshack.com/fichiers/2016/38/1474302676-fond-ecran-plage-de-reve-beach-wallpaper.jpg') center center no-repeat;
      background-size:cover;
      height: 300px; 
      display:flex;
      align-items:center; /* centrage vertical du logo*/
    }
     
    .logo {
      margin:0 auto;
    }

    N.B. z-index n'a rien à voir ici

    3/ une troisième :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <header>
      <div class="logo"></div>
    </header>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    header {
      position:relative;
      background: url('http://image.noelshack.com/fichiers/2016/38/1474302676-fond-ecran-plage-de-reve-beach-wallpaper.jpg') center center no-repeat;
      background-size:cover;
      height: 300px; 
    }
     
    .logo {
      position:absolute;
      background: url('https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201') center center no-repeat; background-size:auto;
      width: 100%;
      height: 100%;
    }

  6. #6
    Membre émérite
    Homme Profil pro
    Retraité informatique
    Inscrit en
    Juin 2012
    Messages
    519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juin 2012
    Messages : 519
    Par défaut
    C'est vrai j'oublie flex et on peut se passer de z-index.
    Mais c'est aussi une solution:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    header {
    	position: relative;
    	background: url('http://image.noelshack.com/fichiers/2016/38/1474302676-fond-ecran-plage-de-reve-beach-wallpaper.jpg') no-repeat;
    	background-size: cover;
    	height: 300px;
    	left: 0;
    	top: 0;
    	right: 0;
    	z-index: 10;
    }
    .logo {
    	position: absolute;
    	background: url('https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201') no-repeat;
    	background-size: auto;
    	width: 100%;
    	height: 100%;
    	top: 40px;
    	left: 170px;
    	z-index: 999;
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <header>
      <div class="logo"></div>
    </header>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Débutant] Manipulation d'images : intégrer une image dans une image
    Par noscollections dans le forum VB.NET
    Réponses: 2
    Dernier message: 17/10/2014, 11h51
  2. [WD18] Metre une colonne d'une Table sur une ligne d'une autre Table
    Par Totophe2 dans le forum WinDev
    Réponses: 2
    Dernier message: 22/11/2013, 12h58
  3. Recuperer une valeur dans une grille sur une image
    Par gwal21 dans le forum Images
    Réponses: 3
    Dernier message: 26/02/2011, 23h41
  4. afficher une image sur une image de fond
    Par vega95 dans le forum wxPython
    Réponses: 2
    Dernier message: 26/11/2008, 18h41
  5. [Image]charger une image sur une page HTML
    Par Malo dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 08/07/2006, 18h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo