Superposer deux images - CSS
Bonjour a tous,
Je créé actuellement la premiere page de mon site web. Cette page est constituée d'une div principale qui s'adapte a la taille de l'écran des utilisateurs.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.contenu
{
width: 93%;
min-width:670px;
height: 350px;
margin: 0;
margin-left: 3%;
margin-right: 3%;
}
.entiere
{
float: left;
width: 100%;
height: 350px;
margin: 0;
padding: 0;
} |
Dans cette div, j'ai mis une image portant les mêmes propriétés de taille que la div. Cela a pour effet d'afficher une image prenant 100% de la place disponible. Lorsque la résolution change (par exemple sur un wide screen de portable), alors le site s'elargit et l'image aussi.
Code:
1
2
3
4
|
<div class="contenu">
<img class="entiere" src="mon_image_de_fond.jpg">
</div> |
Ma question est la suivante :
Je souhaite faire en sorte que "mon_image_de_fond.jpg" puisse accueillir d'autres images (des boutons) donnant accès aux pages suivantes de mon site. J'ai essayé avec des attribut "float: left" par exemple, mais cela ne fonctionne pas ! (les images de boutons se retrouvent sous l'image de fond).
A savoir que pour conserver le fait que "mon_image_de_fond.jpg" garde la taille de la div la contenant, et qu'elle soit redimensionnée automatiquement suivant les résolutions, je ne peux (pense pas) l'inclure avec l'option "background-image".
Est ce donc possible de faire ce que je souhaite ?
Merci de vos réponses.
