AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2009 07 05 22:53:41
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

POSITION 'FIXED' POUR LE BACKGROUND, FONCTIONNE SOUS IE


Information sur la source

Catégorie :Trucs & Astuces Classé sous : fixed, background, ie, css, hack Niveau : Débutant Date de création : 20/03/2007 Vu : 11 372
Auteur : x_mec Site perso
Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Note :
8 / 10 - par 1 personne
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

Description

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

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

Commentaires et avis

signaler à un administrateur
Commentaire de viking_force le 28/03/2007 09:46:42

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

signaler à un administrateur
Commentaire de stfou le 01/04/2007 19:25:33

Effectivement, effet très joli.

signaler à un administrateur
Commentaire de stfou le 09/04/2007 18:29:45

Plus simple (enfin je crois):

window.onscroll=function(){document.body.style.backgroundPosition=(-window.scrollLeft)+" "+(-window.scrollTop);}

signaler à un administrateur
Commentaire de idemlove le 06/05/2007 19:55:29

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

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Problèmme d'alignement de background avec css [ par mortiis ] Bonjour à tous,Je travaille présentement sur un site déjà existant et je doit faire en sorte qu'une image de fond soit alignée par rapport à une colon Background avec TinyMce [ par atchoumen ] Bonjour à tous,Voila mon problème, j'utilise l'editeur TinyMCE (http://tinymce.moxiecode.com/download.php) et pour des raisons d'un projet, il faudrai Le hover en css marche pas sous IE? [ par Monico9385 ] Bonjour tout le monde! j'ai cr&#233;&#233; un menu tout simple en css, ou quand on passe la souris au dessus d'un div ca change la couleur. Voila mon Bouton en style CSS qui ne fonctionne pas sous ie [ par zemele ] Bonjour, Voil&#224; j'ai fait un bouton qui fait appel &#224; un style : Code css : a.bouton { &nbsp;&nbsp;&nbsp; color: #333333; &nbsp;&nbsp;&nb background-position-x + ie6 + jquery [ par sn4ch ] Bonjour a tous, Aider moi a survivre au week-end: J'ai un site, a base de css et de jquery - http://www.thegraphicdesignschool.eu - qui fonctionne a changement background 'un TD ? [ par caviar ] Saluté olala ... je vais me faire engueuler si un adepte du css lit ça ... mais en css ça passe pas ... alors je suis à l'ancienne sur ce coup ...j'ai [CSS ] mon background-attachment fonctionne uniquement sur IE [ par attentio ] Bonjour,  j'ai une image de fond qui est centrée mais je voudrais que lorsque la fenetre du navigateur est plus petite que mon tableau principale alor Pb de css simple sous IE 7 [ par sebastien_et_typh ] Bonjour je vien solliciter votre aide car je devute en css et mon code que je trouve simple ne fonction pas sous IE7 mais sous Mozilla aucun probleme css position:fixed; sans scroll horizontal [ par ghost_of_prog ] Bonjour à tous,j'ai un souci en css, je ne sais pas si cela est possible alors je demande a tout hasard ...voila j'ai une div en position:fixed; je vo checkloadfile marche sous IE, FF, mais pas sous chrome... [ par BenHen75 ] Bonjour, Voila, j'ai un problème de compatiliter, j'ai un script qui se met à jour toutes les 3 secondes pour afficher les infos d'une parti: functi


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version


HTC Touch HD
Entre 25€ et 605€


Visiter le guide achat

Photothèque Nouveau !

Photo friends at the beach.Photo friends
Photo regard intense d'une magnifique femmePhoto femme, plage, bien être, soleil, vacances, été, détente, repos

Visiter la photothèque


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,796 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.