Background d'une DIV fixed et position.

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Background d'une DIV fixed et position.

boxfly

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 :

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 :

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

Publicité

gatsu35

Blablaté par Harko

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

Message cité 1 fois

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

boxfly

gatsu35 a écrit :

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.

boxfly

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

Code :

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 :

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

:bounce:

gatsu35

Blablaté par Harko

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 :

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

FORUM HardWare.fr

Programmation

HTML/CSS

Background d'une DIV fixed et position.

Sujets relatifs
Jquery/firefox : différence background & background-color	Golive: Position d'image
Des Div ne s'affichent pas...	Position JMenuItem
[CSS] Centrer un DIV a cote d'un DIV aligne a gauche	Alignement Div Horizontal
Défilement images background	Div contenant d'autres div ?
Div dans include ou include dans div ?	Comment mettre un menu à cheval sur deux bloc DIV ?
Plus de sujets relatifs à : Background d'une DIV fixed et position.

Page générée en 0.052 secondes