<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
.boite { /* définition de la boite 1 */
position:absolute ; /* positionne la boite dans l'écran
*/
top:80px ; /* à 80 pixels du haut de page */
left: 30% ; /* et 30% du bord gauche de la page */
height:200px ; /* hauteur de la boite */
width:250px ; /* largeur de la boite */
border:solid black 1px} /* bordure de la boite */
.boite2 { /* définition de la boite 2*/
position:absolute ; /* idem boite 1 */
top:80px ; /* idem boite 1 */
left: 70% ; /* boite positionnée à 70% du
bord gauche de l'écran */
height:200px ; /* idem boite 1 */
width:250px ; /* idem boite 1 */
border:solid black 1px ; /* idem boite 1 */
background-image : url(taoteking2.jpg)} /* image de fonds
de boite2*/
</style>
</head>
<body>
<img class="boite" src="taoteking2.jpg" alt="">
<!-- affectation du style "boite" à l'image -->
<div class="boite"> <!--affichage de la boite elle-même
par-dessus l'image -->
<h2>Exemple boite 1</h2>
On voit que l'image de fonds de 200 X 500 pixels s'est déformée
pour couvrir entièrement une boite de 250 X 200.
</div>
<div class="boite2"><!-- affichage "boite2"
-->
<h2>Exemple boite 2</h2>
On voit que l'image de fonds de 200 X 500 pixels ne s'est PAS
déformée pour couvrir la boite de 250 X 200.
</div>
</body>
</html>
COMMENTAIRES
Il existe une fonction CSS permettant de définir une image de fonds dans un style. C'est la fonction "background-image". Elle soufre cependant d'un inconvénient important : on ne peut demander à l'image de prendre la forme de la boite. Ce qui dépasse est coupé.
Il existe cependant une solution : affecter le style de la boite à l'image (<img class="boite"...), et demander à celle-ci de s'adapter à 100% en largeur et à 100% en hauteur à la boite (.boite img {width:100% ; height:100%}).
Attention, pour que la boite ne soit pas cachée par l'image, il faut que l'image soit affichée dans le body html AVANT la boite. Dès lors, c'est la boite qui vient s'afficher par dessus l'image. On peut aussi gérer la priorité d'affichage par une fonction CSS z-index, mais ce n'est au fond pas nécessaire dans l'exemple ci-contre.
On voit dans "exemple boite 1" que l'image (qui fait en réalité 200 pixels de large sur 500 pixels de haut) s'est parfaitement adaptée à une boite de 200 X 250 pixels, en se déformant.
Dans "exemple boite 2", l'image est chargée par un background-image. On note 2 choses :
- comme la largeur de la boite est de 250 pixels et que celle de l'image est de 200 pixels, l'image se répète sur la droite, pour 50 pixels.
- Comme la hauteur de la boite est de 200 pixels, et que celle de l'image est de 500 pixels, l'image a perdue les 300 pixels du bas.
Pour télécharger l'image d'exemple.
Pour en savoir plus sur background-image et sur z-index.