28172 sujets

CSS et mise en forme, CSS3

Positionnement div superposant une image

Bonjour,

Je cherche depuis hier comment placer un div par-dessus une image, mais selon des critères bien particuliers :
- l'image fait la largeur de la page web (width: 100%), et elle n'est pas déformée (la hauteur reste proportionnelle à la largeur)
- le div que je souhaite placer est à 23% de la hauteur de l'image (top: 23%), et est aligné à gauche dans un div parent, superposé à l'image, centré, de largeur fixe (1000px).

Ici un visuel pour illustrer mon propos :

upload/53323-Demo1.jpg

Et voici le code actuel :


<body>
	<div style="width: 100%; position: relative;">
		<img src="imagefond.jpg" style="width: 100%; position: relative; z-index: 0; display: block;" />
		<div style="width: auto; max-width: 1000px; margin: 0 auto; height: 100%; position: relative; background-color: #FF0000; z-index: 1;">
			<div style="position: absolute; top: 23%; left: 0; width: 600px; height: 200px; background-color: #FFFF00;">
				div jaune
			</div>
		</div>
	</div>
</body>


Merci par avance pour votre aide ! Smiley cligne
Merci !

Pour info, après recherches, voici la solution utilisée :

<div style="position: relative;">
	<img src="imagefond.jpg" style="width: 100%; display: block;" />
	<div style="width: 1000px; margin:auto; left:0; right:0; top:0; height: 100%; position: absolute; background-color: #FF0000;">
		<div style="position: absolute; top: 23%; width: 600px; height: 200px; background-color: #FFFF00;">
			div jaune
		</div>
	</div>
</div>


Et pour éviter la barre de scroll horizontale lorsque la page fait moins de 1000px de large, une media query sur le div rouge (avec width: 100% au lieu de 1000px) et hop ça marche Smiley smile
Sujet clos
Aller à