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 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
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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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.