Discussion :

[defacta]

Bonjour,

J'ai un petit soucis, quand je mets un background à fixed dans un DIV il est mal positionné et donc pas assez grand alors que la taille de l'image du background est plus grande que la DIV, le source:
http://boxfly.free.fr/test/bg_fixed.html
Dans la première DIV il y a ceci dans le style de la DIV:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background: #9d977f url(TigerAquaBlue.jpg) 0 0 fixed;

Et on peut voir à droite qu'il y a une bande bleu alors que l'image est assez grande mais elle est mal positionnée.
Dans la seconde DIV, j'ai pas mis fixed et résultat, l'image est bien placée et donc assez grande.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background: #9d977f url(TigerAquaBlue.jpg);

Comment faire ne sorte que l'image soit bien cadrée avec fixed ?

Merci,
Vincent.

PS: J'ai le même résultat avec IE, Firefox et Chrome. Il faut que le navigateur ait une largeur minimum de 1200px pour voir les DIV.

[defacta]

Bon, j'ai compris, c'est parce que si l'on met un background à fixed, ca démarre en haut à gauche de la page, pas à partir de la div dans laquelle il y ce background fixed.

Donc, il faut placer le background en fonction la position de la div:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  document.getElementById('bg_DIVBODY').style.backgroundPosition = document.getElementById('bg_DIVBODY').offsetLeft + ' 0';

Et lorsque la personne resize la page, un onResize dans le body de la page dont la fonction est:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var JS_bg_fixed = 1 ;
function JS_onResize() {
  if(JS_bg_fixed) {
    document.getElementById('bg_DIVBODY').style.backgroundPosition = document.getElementById('bg_DIVBODY').offsetLeft + ' 0';
  }
}