Background-attachment: image déformée

Bonjour,
je suis nouveau sur ce site.

Mon problème concerne la propriété ' background-attachment: fixed; ' dans un parallaxe. Je suis le tuto de
w3schools.com à cette adresse:
https://www.w3schools.com/howto/howto_css_parallax.asp

J'ai essayé dans tous les sens, et j'ai toujours le même problème : la première image du parallaxe, celle du haut donc, est déformée. Comme si on l'avait zoomée. Par contre, celles du dessous s'affichent normalement. J'ai vraiment l'impression d'avoir absolument tout essayé. Auriez-vous une piste ?

Des éléments:
- Ce sont des images jpg.
- L'image qui débloque, seulement la numéro 1 donc, est de mon cru: c'est une mosaïque de petites images réunie sous GIMP et qui forme bien 1 seule grande image jpg.
Donc je ne vois pas où est le problème: mon image 1 (la mosaïque) devrait s'afficher normalement, comme celles de dessous. Ce sont bien 3 jpg de même taille. Et j'ai suivi le tuto.

Merci pour votre aide.
Modifié par Delgesu (19 Apr 2017 - 12:47)

Bonjour,

Pouvez-vous nous donner une url pour visualiser la page?

Merci pour votre réponse 'fanfann'.
Je vais avancer un peu dans le projet avant de poster le lien
puis je vous le donnerai. Il me manque encore des photos pour concrétiser le parallaxe sur 3 ou 4 <div>.
@+

De retour ! Fanfann si vous m'écoutez ....
Voici une adresse pour le site, hébergé pour l'instant sur ma page perso Orange (le temps que le site soit fini):

lecaillou.pagesperso-orange.fr

Comme vous pouvez constater, la bannière du haut est atroce, alors qu'il s'agit d'une jolie mosaïque que j'ai confectionnée avec GIMP et que vous pouvez voir ici:

la mosaïque

N'hésitez pas à me donner votre avis à propos de l'aspect du site aussi. Il n'est pas terminé, mais ça en approche. La solution de tout mettre sur une page avec des ancres est un choix. Il me faudra faire ensuite le côté responsive, mais ce n'est pas ce qui m'inquiète le plus. Quant au blog, j'hésite entre plusieurs possibilités: un lien vers un service de blog externe (genre blogger ou tout simplement tumblr - il s'agit plus d'un mini-blog pour donner quelques infos sur les événement locaux), un mini site Wordpress (mais il faut alors payer un nouveau nom de domaine ?) ou un CRUD en PHP à l'intérieur de mon site (mais je n'étais pas parti pour ça à la base; c'est vraiment un site statique).

Merci
Modifié par Delgesu (07 May 2017 - 09:28)

En fait, que l'image soit "attachée", c'est fait exprès, je veux un parallaxe ! Le problème, c'est qu'elle soit déformée. ça ne le fait pas avec la 2e par exemple.

Si j'enlève le

background-size: cover;

, ça ne règle que partiellement le problème: la bannière retrouve une taille normale, mais est complètement abaissée vers la 2e div, et donc à moitié cachée. En plus, c'est la 2e div qui se retrouve amputée ensuite.... Il doit bien y avoir une solution simple. Serait-ce dû en effet à la taille originelle de la photo-mosaïque ?
J'avais choisi cette taille parce qu'elle correspond à la largeur max de mon écran, et je me suis dit que Bootstrap rendait le site responsive. D'ailleurs, aucun problème pour toutes les autres photos du site.

Si je n'y arrive pas, je laisse tomber le parallaxe et je fais une simple page qui défile verticalement. Et si je fais ça, la taille de ma bannière ne pose plus problème ! C'est bien ça qui m'agace !
Modifié par Delgesu (07 May 2017 - 10:09)

Je pense qu'une solution serait à la fois d'enlever 'background-size : cover' et 'background-repeat : norepeat'... Comme cela, vous êtes sûr que votre image va couvrir toute la div sans agrandissement. (Evidemment, ce serait plus joli avec un 'papier peint' avec raccord)

Bon, ça m'a gonflé, j'ai viré la mosaïque. Je la remettrai peut-être un jour. Mini-problème: dans la partie "Contact", il y a une icone Facebook normalement, et elle n'apparaît pas ?? C'est bizarre ! Elle est dans le code et sur le serveur ...
Aussi encore un petit problème à régler.

Sinon le site est responsive à présent.

le site
Modifié par Delgesu (08 May 2017 - 13:35)

Un bon point pour Duchampignon

Je n'ai pas Ublock Origin, mais AdBlock Plus. Je l'ai désactivé et ... tadaaa ça marche !