Gérer l'image de fond : CSS ou JS ?
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:
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':ccool:
Djeros
Gérer image de fond - js ou css ? suite
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 :ccool:
Djeros
Gestion de l'image de fond : c'était un jquery !
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 :ccool:
