26069 sujets

CSS et mise en forme, CSS3

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)
Merci pour votre réponse 'fanfann'.
Je vais avancer un peu dans le projet avant de poster le lien Smiley cligne
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 .... Smiley lol
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 Smiley jap
Modifié par Delgesu (07 May 2017 - 09:28)
Bonjour.

J'ai consulté votre site sur mon ordinateur et... pas de mystère.
Votre image fait 1876px de large par 417px de haut. La div dans laquelle elle s'affiche fait 978px de large par 417px de haut. Elle ne peut donc afficher que la moitié de l'image en largeur.

De plus, avec 'background-attachment : fixed', l'affichage de l'image débute à partir du bord haut gauche de l'écran, l'image est 'attachée' à la fenêtre et non à la div, c'est pour cela que le contenu de l'écran est déroulé, celle-ci ne bouge pas. Comme vous avez ajouté 'background-size : cover', l'image de fond doit être grossie pour couvrir la div... J'ai l'impression que c'est cela précisément qui vous trouble...

Smiley smile
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)

Smiley smile
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)
Ouaip c'est bizarre: il apparaît dans Chromium, mais pas dans Firefox . Parfois, il y a des choses qui me dépassent ...
J'ai retravaillé la photo du haut, chuis assez fier de moi pour le parallaxe à présent Smiley langue .
Un bon point pour Duchampignon Smiley ola

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