Backgrounds-size

Bonjour, je réalise un site avec des photo full-size en background que je vais sans doute mettre en parallax.

Il faut que mes photos s'adapte pour que le design soit responsive.

La solution via le javascript ne me convenait pas trop puisceque je veux faire du parallax, avoir donc des "img" n'allait pas.

j'ai donc utilisé background-size:cover; sur une image de 1600px
Seulement je constate un fort ralentissement dans le scroll down sur firefox (je n'ai pas testé d'autres navigateurs).

j'ai donc passé en background-size:100% qui me convenait bien aussi à la rigueur.. Mais toujours le même problème. Mais un peu plus léger.

J'ai donc finalement simplement opté pour @media dans mon css et j'ai mis sur le serveur 8 verisons de l'image pour que la résolution s'adapte de 1600px à 380px. Ainsi je n'ai plus d'à-coup dans mon scroll vers le bas.

Avez vous déjà utilisé background-size, avez vous été confronté au même problème ?

Cordialement,
Casp.

Houlala, tu es sur la mauvaise piste à mon avis.

casp a écrit :
La solution via le javascript ne me convenait pas trop puisceque je veux faire du parallax, avoir donc des "img" n'allait pas.

Pourquoi avoir des éléments img ne convenait pas ?

La ralentissement est surement du au poids de tes images les as-tu optimisées ? As-tu lu l'excellent tutoriel de Simon sur l'arrière plan extensible ? Ou encore celui sur l'effet parallaxe ?

Tu verras après ces deux lectures ça ira tout seul