Bonjour,

J'ai un souci d'affichage d'image de fond que je ne comprends pas. J'ai une page d'accueil dont la présentation est conçue comme un bureau "physique". J'ai créé plusieurs "div", dont quelques-uns se chevauchent, qui contiennent des textes et des images et qui donnent l'impression que c'est la table de travail de quelqu'un : une tasse de café, un stylo (quand on clique dessus il renvoie vers le formulaire de contact), plusieurs feuilles de papier superposées sur lesquelles ont peut cliquer pour découvrir le contenu, etc.

Au chargement de la page, les images s'affichent une par une, par "fadeIn" (petit script JQuery), jusqu'à ce que l'image de fond (qui suggère un sous-main) s'affiche en dernier. Le hic c'est qu'elle s'affiche coupée : il n'apparaît qu'une petite partie, en haut de l'écran, le reste disparaît, comme s'il y avait un "div" avec un fond blanc par dessus. Le système trouve bien le chemin vers l'endroit où est stockée l'image, c'est pas ça le problème et elle commence à s'afficher en dernier, comme indiqué dans le script JQuery, mais elle ne s'affiche pas complètement.

Je précise que l'image de fond est appliquée au "wrapper" qui contient tous les autres éléments et que, par ailleurs, les autres bouts de code fonctionnent correctement (renvoi vers d'autres pages, animations au clic, etc)

Je ne vois pas vraiment où est le souci, quelqu'un aurait une idée ??

8 réponses


Bahamut45
Réponse acceptée

Bonsoir,

Ton image est pas bonne : http://andreeap.free.fr/Images/fond03.png pour moi elle n'a qu'une petite partie en haut de couleur le reste est blanc.

Réupload ton image et reessaye.

Cordialement

Quel est la taille de ton wrapper ?

Il est "un peu" grand, j'avoue :

height: 1500px;
width: 1950px;

Est-ce que ça a un impact ?

Tu peux nous envoyer un lien ou faire un codepen histoire qu'on visualise ton probleme ?

Voici le lien vers la page (site encore en construction) : http://andreeap.free.fr Tu verras, en haut de page y'a un petit bandeau, couleur turquoise. C'est censé être l'image de fond !

Au fait, je précise qu'en local l'image s'affiche correctement

Merci Bahamut, c'était bien ça !

En remarque: La police utilisée pour ta liste de compétences est difficilement lisible.
De plus, l'animation du début est inutile à mon sens.