Tutorial CSS n°2
CSS: Position 'fixed' pour le background
Par défaut, l'image d'arrière plan défile avec le document, comme si elle était collée à l'élément.
La proprièté css background-attachement permet de libèrer l'image d'arrière plan du contenu et lui permetde rester à une position fixe lorsque le contenu défile.
En effet l'image est déconnectée du flux du contenu et est attachée à la zone d'affichage (la fenètre du navigateur donc).
La valeur fixed permet donc à l'image de collé au coin superieur gauche de l'ecran,
celà peut ètre interesant pour donner certains effets a votre page, comme donner l'illusion de transparence ou de deformation sur le fond.
Malheureusement, une fois de plus internet explorer 6 (et precedant) n'en font qu'à leur tète et ignore tout simplement cette propriété !
Le fonctionnement de cette page
Cette page vous donne une impression de transparence et d'espace n'est-ce pas ?
J'utilise en fait 4 images, toutes légérement différentes.
Une image pour le body, une pour la zone "content", une pour les titres h1 et une pour les titres h2.
Aucun png ou autre artifice est utilisé !
Cette methode a été mise en avant par Eric A. Meyer sur son site: complex spiral (original)
Le CSS utilisé, valable pour tout navigateur sauf ie6 (et precedant)
Une fois les images de background réglées, nous allons donc "fixer" nos background pour l'element body, content, h1 et h2.
body, div#content, div#content h1, div#content h2 {background-attachement: fixed;}
L'image de fond pour l'element body: url(01.jpg), pour l'element content: url(03.jpg), pour l'element h1: url(00.jpg), pour l'element h2: url(02.jpg).
Par defaut, les coordonnées de vos background seront 0,0 c'est à dire dans le coin superieur gauche du navigateur.
Mais pour des raisons esthetique, vous pourriez par exemple placer vos image en bas a droite,
dans ce cas reglez les propriétés background-position: 100% 100%; (vous pouvez aussi juste ajouter un deport, en pixels par exemple).
Contournement, pour le fonctionnement sous ie6
Etant donné que cette propriété est ignoré sous ie, nous allons utilisé un peu de javascript couplé a notre css pour combler cette lacune, de manière totalement transparente pour le visiteur.
Nous allons donc appeler une fonction javascript depuis notre css, qui va se charger de réecrire les coordonnées des images de fonds.
Ici j'inclus le script directement dans la page, mais vous pouvez le charger dans un .js externe egalement.
<script type="text/javascript">
// <![CDATA[
function fixed_back(select,offX,offY){
if (offX.lastIndexOf("%") != -1){
var img = new Image();
img.src = select.currentStyle.backgroundImage.substring(5,Number(select.currentStyle.backgroundImage.length-2));
var tempX = Number(offX.substring(0,offX.lastIndexOf("%")));
tempX = Number((((document.documentElement.clientWidth-img.width)*tempX)/100)+document.documentElement.scrollLeft-select.offsetLeft)+'px';
} else {
var tempX = Number(offX.split("px")[0]);
tempX = Number(tempX+document.documentElement.scrollLeft-select.offsetLeft)+'px';
}
if (offY.lastIndexOf("%") != -1){
var img = new Image();
img.src = select.currentStyle.backgroundImage.substring(5,Number(select.currentStyle.backgroundImage.length-2));
var tempY = Number(offY.substring(0,offY.lastIndexOf("%")));
tempY = Number((((document.documentElement.clientHeight-img.height)*tempY)/100)+document.documentElement.scrollTop-select.offsetTop)+'px';
} else {
var tempY = Number(offY.split("px")[0]);
tempY = Number(tempY+document.documentElement.scrollTop-select.offsetTop)+'px';
}
return tempX+' '+tempY;
}
// ]]>
</script>
Bon je ne vais pas detaillé le fonctionnement de ce script, mais en gros il calcul la distance des element par rapport au coin superieur gauche de l'ecran, et deplace les images de fonds en consequence. Cette fonction prend en compte les valeurs en px et en %.
Et voici donc la partie css propre a ie6. J'ai inclus le css directement dans la page, en utilisant un commentaire conditionnel qui interprète le script que pour les versions inferieur a ie7.
<!--[if lt IE 7]>
<style type="text/css">
div#content, div#content h1, div#content h2 {
background-position: expression(fixed_back(this,'0','0'));
}
</style>
<![endif]-->
Remarquez que j'ai utilisé la propriété background-position au lieu de background-attachement.
Ceci s'explique par le fait que je me sers de background-position pour recalculer les coordonnées de l'image.
Notez donc que vous pouvez changer les valeurs '0' pour d'autres (en % en px).
PS: Si vous apercevez un clignotement des images lors du scroll, une astuce consiste à heberger les images de fond sur un autre domaine (comme pour mon exemple). Si quelqu'un voit d'où peu venir ce phènomène, je suis preneur.