Background d'une DIV fixed et position.

Background d'une DIV fixed et position. - HTML/CSS - Programmation

Marsh Posté le 14-04-2010 à 23:06:18    

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 :
  1. 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 :
  1. background: #9d977f url(TigerAquaBlue.jpg);


 
 
Comment faire en 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 avec les bordures sur les côtés.


Message édité par boxfly le 14-04-2010 à 23:07:55
Reply

Marsh Posté le 14-04-2010 à 23:06:18   

Reply

Marsh Posté le 14-04-2010 à 23:55:10    

heu c'est le comportement normal de fixed, jvois pas ce qui te choque
 
tu déclares une images en 0 0 fixed
ca signifie que ton image se fixe au bord 0 0 de la page complète, et donc si le navigateur est plus large, oui tu verras cette bande bleu et l'image en décalé. Jvois pas ce que tu souhaite au final


---------------
Blablaté par Harko
Reply

Marsh Posté le 15-04-2010 à 00:07:48    

gatsu35 a écrit :

heu c'est le comportement normal de fixed, jvois pas ce qui te choque
 
tu déclares une images en 0 0 fixed
ca signifie que ton image se fixe au bord 0 0 de la page complète, et donc si le navigateur est plus large, oui tu verras cette bande bleu et l'image en décalé. Jvois pas ce que tu souhaite au final


 
Ah, de la page complète !
 
Je pensais pas que c'était de la page complète alors que c'est le background d'une DIV, pas de la page...
Comment je peux faire, sachant que la position de la DIV peut changer suivant la résolution du navigateur et si on resize la page ?
La div se trouve au milieu de la page et elle a un max-width fixé à 1102px.
 
Merci,
Vincent.

Reply

Marsh Posté le 15-04-2010 à 01:22:16    

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

Code :
  1. 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 :
  1. var JS_bg_fixed = 1 ;
  2. function JS_onResize() {
  3.   if(JS_bg_fixed) {
  4.     document.getElementById('bg_DIVBODY').style.backgroundPosition = document.getElementById('bg_DIVBODY').offsetLeft + ' 0';
  5.   }
  6. }


 
 :bounce:

Reply

Marsh Posté le 15-04-2010 à 02:10:54    

nan mais c'est quoi que tu veux faire ???  
parce que là tu bricole et j'ai pas encore compris ce que tu souhaites [:petrus75]
tu veux centrer l'image dans le div ?  
tu veux faire quoi avec cette image ? elle doit suivre la largeur de la page ?
je pine keudal à ce que tu veux.
 
Un simple

Code :
  1. background: url('image.png') center 0;


et tu laisses la valeur du background-attachment par defaut qui est scroll.
 
explique plus clairement ce que tu veux


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed