Superposer une image sur une autre en relatif

**philou8** · 17/10/2016, 23h40

Bonjour,
je désire positionner une image B au dessus d'une image A, en la calant en un point dont les coordonnées sont exprimés en pourcentage des largeur/hauteur de l'image A. je désire également que les dimensions de l'image B varie proportionnellement à l'image A lorsque je redimensionne par exemple la fenêtre du navigateur.
Actuellement le positionnement se fait par rapport à la fenêtre et non l'image A, et il me faut faire varier les dimensions de l'image B en fonction de celle de A
Merci pour un coup de main
Trachy

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
 
	#image_accueil{
	position:relative;top:0px;left:0px;
	}
	#image_accueil img {
   	 max-width: 100%;
    	height: auto;
	}
	#barre_media{
	position:absolute;
	top:10%;
	left:10%;
	z-index:4;
	}
	#barre_media img {
   	 max-width: 100%;
    	height: auto;
	}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Tourisme </title>
<link rel="stylesheet" type="text/css" media="all" href="libcss/cyb/PDF_accueil_windows.css" />
</head>
 
<body >
  	<div id="image_accueil" ><img src="PDF_accueil.jpg" /><div  id="barre_media"><img src="barre_media.jpg" /></div></div>		
</body>
</html>

**eleydet** · 18/10/2016, 10h17

Bonjour,

Il me semble que j'aurais écrit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
#image_accueil{
   position:absolute;
}
#barre_media{
   position:absolute;
   top:10%;
   left:10%;
}

il me faut faire varier les dimensions de l'image B en fonction de celle de A

Je ne comprends pas : Les dimensions de l'image A peuvent varier?

Superposer une image sur une autre en relatif

JavaScript

Discussions similaires

Partager

Partager