Gérer l'image de fond : CSS ou JS ?

**Djeros** · 22/01/2014, 14h31

Bonjour,
j'ai trouvé sur ce site (http://www.jazz31.com/) ce que je cherchais
depuis longtemps, à savoir, utiliser une image de fond qui ne change pas
avec le zoom et le dézoom ; seuls changent les éléments constitutifs du
contenu du site. Je ne sais pas si je suis assez clair (voyez le site en
question, ce sera beaucoup plus parlant).

Et ma question est : Comment faire ? Css ou Js ? J'ai bien regardé le code de la page mais, mis à part le fait qu'il assez imposant - et gros level, je ne sais pas où se situe la partie qui fait ce qui m'intéresse.

J'ai tenté le coup avec le code css suivant :

Code :

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

1
2
3
body { overflow:hidden; }
#fond { position: absolute; top: 0; left :0; }
#fond,#fond img { width: 100%; height: 100%; }

appliqué au html :
<body> <div id="fond"> <img src="site_espace.jpg" /></div> etc .

Et ça fonctionne, le zoom n'ayant aucun effet sur l'image de fond.

Mais cette solution - qui est plutôt une astuce, comporte plusieurs défauts assez gênants : si vous zoomez, les éléments du contenu grandissent mais sortent de la page et vous n'y avez pas accès, bien entendu, puisque l'overflow est positionné sur hidden ^^ ; d'autre part, si vous diminuez la fenêtre, une fois encore, plus d'accès aux éléments 'hors-champ', en plus de déformer l'image, ce qui n'est pas le cas sur le site que j'ai cité plus haut. Bref, ce n'est pas satisfaisant.

Du coup, si quelqu'un peu m'aider, soit avec une soluce css - je ne sais pas si c'est possible, ou avec du js, ou encore si une âme charitable va voir le site en question (http://www.jazz31.com/) et est capable de retrouver la partie de code concerné, je lui en serai mille fois reconnaissant car esthétiquement, je trouve ça extra (je travaille en ce moment sur un site avec des photos de Hubble et c'est vraiment dommage de les gâcher autrement).

Voilou, pas trop long j'espère, merci pour vos com'

Djeros

**raydenprod** · 22/01/2014, 14h53

Bonjour

je crois que ce que tu cherches est ceci :

tu mets ton image en background dans ton css
puis tu le mets en position fixed comme suit :

Code :

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

1
2
3
4
#fond {
background: url('images/tonimage.png');
position: fixed;
}

**Djeros** · 22/01/2014, 15h13

Salut à toi raydenprod,
merci de ta réponse, mais ce n'est pas ça, il est vrai que je n'ai pas précisé les quelques solutions que j'ai essayées - position: fixed, background-attachment: fixed, et certainement quelques autres que je n'ai plus en tête, mais franchement, je ne suis pas sûr que ce soit possible en css.

Voilou, merci encore, ma question reste posée. Tchouss

Djeros

**Djeros** · 26/01/2014, 16h00

Yo les ami-e-s,
trop content de vous donner la soluce parce que, pour moi en tout cas, c'était pas gagné d'avance de la trouver au milieu du code très fourni de la page de Jazz31.com.

Je vous passe les détails, mais sachez qu'il s'agit d'un jquery développé par Scott Robbin (http://srobbin.com/projects/). Sur sa page vous pouvez télécharger la totale, src, lib, exemples tout inclu dans un zip.

Year je suis trop content et j'espère que ça vous servira, à bientôt,

Djeros

Gérer l'image de fond : CSS ou JS ?

CSS

Discussions similaires

Partager

Partager