Afficher une image sur une autre

Version imprimable

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:

1 2 3 4 <header> <div class="logo"> </div> </header>
et mon code css
Code:

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.

10/03/2017, 09h37
JefReb

Et avec un z-index ça marcherait surement mieux ....
10/03/2017, 11h37
Invité
Bonjour,
Code:

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 ? :koi:
10/03/2017, 12h06
JefReb

Arrg :oops:... 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..

1/ Une solution :

Code:

1
2
3
<header>
  <div class="logo"></div>
</header>

Code:

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:

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:

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:

1
2
3
<header>
  <div class="logo"></div>
</header>

Code:

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%;
}

C'est vrai j'oublie flex et on peut se passer de z-index.
Mais c'est aussi une solution:

Code:

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:

1
2
3
<header>
  <div class="logo"></div>
</header>

10/03/2017, 14h35
Invité
z-index n'a d'intérêt que si on DOIT faire passer un élément au dessus d'un autre, et qu'on ne peut pas faire autrement.

Dans ce cas, par exemple :
Code:

1 2 3 <div class="logo"></div> <header></header>
10/03/2017, 17h21
olivorel

Merci beaucoup pour toutes ces propositions!!

Pour vous répondre dans l'ordre:

"Et pourquoi mettre le logo en background ? "
=> je voulais juxtaposer le logo sur l'image de fond car je me suis dit si je le fais sous paint l'image risque d'être déformée une fois que mise sur le site.

concernant le "display: none" => c'était le "display: block" que je voulais noter... désolée... mais ca n'allait pas non plus...

Je remarque que "background-image" ne fonctionne pas, pourquoi privilégie t'on le "background"? Quelle est la différence entre les deux?
10/03/2017, 20h00
Invité
- Glossaire des propriétés CSS : III-B-5. Fond tout-en-un | background
10/03/2017, 21h04
olivorel

Merci beaucoup!