Ajuster les dimensions d'une image d'arrière plan
Le casse-tête quotidien des concepteurs de sites Web : comment faire en sorte que l'image de fond s'ajuste à la taille de la fenêtre ?
Sans doute un oubli : aucune propriété de feuille de style ne définit la largeur et la hauteur de l'image de fond.
On en est donc réduit à inventer des bricolages.
On peut par exemple utiliser un div positionné en absolu en x=0 et y=0, et contenant une image dont la taille est ajustée par javascritp.
La solution proposée ci-après conserve le background d'origine, mais redimensionne à la volée l'image de fond avec un petit script php :
Au changement de la page html (événement onload), un javascript détecte la largeur de la fenêtre (innerWidth ou clientWidth selon le navigateur)...
...puis remplace l'image de background par une image à la bonne largeur créée à la volée par un script php.
Le lancement du javascript chfond à partir de la balise body : <BODY onload='chfond()'>
Le javascript chfond (positionné de préférence entre les balises <HEAD>) :
<HEAD>
<SCRIPT>
function chfond()
{
// chercher la largeur de la fenêtre
var largecran=800;
if(typeof(window.innerWidth)=='number')
{//non-IE
largecran = window.innerWidth;
}
else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
{//IE >=6
largecran = document.documentElement.clientWidth;
}
else if(document.body && (document.body.clientWidth||document.body.clientHeight))
{//IE 4 compatible
largecran = document.body.clientWidth;
}
// afficher l'image redimensionnée
document.body.background='php/imgfond.php?w='+largecran;
}
</SCRIPT>
</HEAD>
Et le script php (imgfond.php) qui renvoie une image dont la largeur est égale au paramètre w qui lui est transmis (par exemple imgfond.php?w=600 renvoie une image de largeur 600 px):
<?php
$w=$_GET['w']; //récupère le paramètre w (largeur visée)
$image_source="imgsce.jpg"; //(adresse de l'image avant redimensionnement)
list($w_source, $h_source)=getimagesize($image_source); // dimensions de l'image initiale
$h=round($h_source*$w/$w_source); //calcul de la nouvelle hauteur
$img_sce=imagecreatefromjpeg($image_source); //lit l'image
$img=imagecreatetruecolor($w, $h); // crée une image vide
imagecopyresampled($img,$img_sce,0,0,0,0,$w,$h,imagesx($img_sce),imagesy($img_sce)); //crée l'image redim
imagejpeg($img); //affiche l'image
?>
On aurait bien entendu pu prendre en compte la hauteur de l'image (si on veut afficher l'image de fond en entier. Dans notre exemple, on a choisi d'afficher l'image en pleine largeur).
On aurait aussi pu passer l'adresse de l'image à redimensionner en paramètre au script php, de manière à avoir un seul script pour toutes les images.
Cette technique est très efficace et relativement simple d'utilisation.
Elle nécessite de disposer d'un serveur supportant php (pas forcément le serveur sur lequel sont les pages html).
Elle peut être un peu lente, il faut le temps que le php recalcule l'image et que l'image recalculée soit téléchargée.