Bonjour,

Mon site est composé :
  1. d'une image de fond, dont je souhaite ajuster automatiquement la hauteur à la résolution d'écran en conservant les ratio de l'image
  2. d'une vidéo youtube, superposé sur l'image de fond, et dont je souhaite que la hauteur fasse un pourcentage de la résolution verticale en conservant le ratio de la vidéo


J'arrive pour l'instant à ajuster automatiquement l'image grace au code suivant dans head :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
.bg {
min-height: 100%;
width: auto;
height: 100%;
margin-top: 0 ;
margin-right: auto ;
}
Puis en l'appelant dans body :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<div style="text-align: center;">
<img src="my_background_image.png" class="bg">
</div>
Cependant, je bloque pour superposer ma vidéo sur mon image de fond, ainsi que pour ajuster automatiquement sa hauteur à la résolution d'écran en conservant le ratio.

Tout ce que j'ai pu essayé jusqu'à présent m'affiche les deux div à la suite, et non supperposé. J'ai l'intuition qu'il me faut utiliser des floats, mais je ne vois pas trop comment.

Des conseils ?

Merci par avance pour votre aide ;-)

Matthieu