begin process at 2012 02 14 09:16:19
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > POSITION 'FIXED' POUR LE BACKGROUND, FONCTIONNE SOUS IE

POSITION 'FIXED' POUR LE BACKGROUND, FONCTIONNE SOUS IE


 Information sur la source

Note :
8 / 10 - par 1 personne
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :fixed, background, ie, css, hack Niveau :Débutant Date de création :20/03/2007 Vu :14 458
Auteur : x_mec

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

 Description

Direct un exemple:
------------------
--> http://blog.ka-studio.net/tuto/background_fixed/ba ckground-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/de mo.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/ba ckground-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-i e


 Sources du même auteur

FIXER LES DIMENSIONS MINIMUM D'UNE DIV (FONCTIONNE POUR LE M...
Toutes les sources de x_mec

 Sources de la même categorie

Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip IMPRIMER UNE PARTIE DE PAGE NON SÉLECTIONNABLE par lecurieux41
FIXER LES DIMENSIONS MINIMUM D'UNE DIV (FONCTIONNE POUR LE M... par x_mec
Source avec Zip Source avec une capture OBTENIR LA COULEUR DE FOND VISIBLE D'UN ÉLÉMENT DHTML [GETVI... par MaX3315

Commentaires et avis

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

Commentaire de stfou le 01/04/2007 19:25:33

Effectivement, effet très joli.

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);}

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 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 modifier l'atribut d'une clas css [ par JJDai ] Bonjour ----------------- Je souhaite modifier l'attribut d'une classe directement dans l'objet CSS Je pourrais modifier le "className" ou l'attribut position fixed sous IE [ par julienboc ] bonjour, j'ai un menu en position fixe en haut de ma page web. ce denier ce comporte très bien sous FF et IE8 mais pas sur les versions antérieures d


Nos sponsors


Sondage...

Comparez les prix


Samsung LE26B350 LCD
Entre 359€ et 417€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Happy Bright Landscape WIth ButterfliesPhoto Beautiful woman in a bikini meditating on the beach
Photo Iguassu Falls is the largest series of waterfalls on the planet, 

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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,420 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)