Position 'fixed' pour le background, fonctionne sous ie

Soyez le premier à donner votre avis sur cette source.

Snippet vu 16 015 fois - Téléchargée 19 fois

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

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
dimanche 6 mai 2007
Statut
Membre
Dernière intervention
6 mai 2007

bonjour
je suis completement paumee je cher a mettrre dans mn bloguez des ou une rose qui tombe de l ecran sur mon blog
merci a toi si tu as le script et savoir ou je le met catr l explication de la neige ne fonctionne pas
merci idemlove
http://IDEMLOVE.bloguez.com
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
Plus simple (enfin je crois):

window.onscroll=function(){document.body.style.backgroundPosition=(-window.scrollLeft)+" "+(-window.scrollTop);}
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
Effectivement, effet très joli.
Messages postés
31
Date d'inscription
lundi 14 février 2005
Statut
Membre
Dernière intervention
29 octobre 2008

bonjour,

bravo pour l'effet (--> http://blog.ka-studio.net/tuto/background_fixed/background-fixed-ie.html
)
Après avoir jeter un oeil rapide sur le code, je l'ai trouvé plutôt simple pour un effet des plus sympathique.....certes l'image y est pour beaucoups :-)

enfin bref, je décortique le code et je reviens poster si y'a besoin....

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.