Position 'fixed' pour le background, fonctionne sous ie

Commenter

Contenu du snippet

Direct un exemple:
------------------
--> http://blog.ka-studio.net/tuto/background_fixed/background-fixed-ie.html

Introduction
------------
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é !

Explications de l'exemple
-------------------------
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 --> http://meyerweb.com/eric/css/edge/complexspiral/demo.html

Pourquoi javascript ?
---------------------
-Simplement pour palier au non support de la propriété background-attachement: fixed d'internet explorer.

Le code source
--------------
Le code ci-dessous n'est que la partie ie, donc celà suppose que pour votre css utilisé sous firefox, vous ayez dejà mis les background attachement a fixed (body, div#content, div#content h1, div#content h2 {background-attachement: fixed;})

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.

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 %.

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.

Source / Exemple : 


<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>

<!--[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]-->

Conclusion :


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.

Credits
-------
-Eric A. Meyer, pour l'idée originelle : http://meyerweb.com/
-Heiko Klug, pour l'image du background : http://www.jesar-one.com/

Exemple concret de ce code:
---------------------------
--> http://blog.ka-studio.net/tuto/background_fixed/background-fixed-ie.html

Sources detaillées sur mon blog:
--------------------------------
--> http://blog.ka-studio.net/index.php?2007/03/19/31-css-javascript-background-attachement-fixed-sous-ie

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_x_mec)