Photo background cover pas responsive !

[tachi300]

Bonjour à tous, quelqu'un pourrait me dire pourquoi mon code HTML n'est pas responsive pour mes photos de fond ...

Voici le code des photos de bandeau de mon site :

<div style="display: block!important;margin-left: -335px;margin-right: -335px;">
<div style=
"background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=origxorig:format=jpg/path/s7f509d59e0e1454c/image/idf1d622d646600df/version/1506427495/image.jpg); background-size: cover; background-attachment: fixed; background-position: center; width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">

</div>
</div>

Un grand merci pour votre aide car je tourne en rond et l'affichage sur un smartphone ne fonctionne pas

[FredVig]

Si vous voulez du responsive sur l'image de fond… ne mettez pas de code. Elle l'est par défaut.
De plus, votre site est si lourd qu'avec une connexion fibre et un PC moderne il est difficile à visiter. Alors avec un GSM… il va manquer beaucoup de choses ! je vous conseille de simplifier (beaucoup) les videos, popup et autres fuites à trafic.

[tachi300]

Bonjour Fred ce n'est pas l'image de fond c'est un ajout d'image en cover background ...

Vous pouvez voir sur mon site !

[tachi300]

Si vous voulez du responsive sur l'image de fond… ne mettez pas de code. Elle l'est par défaut.
De plus, votre site est si lourd qu'avec une connexion fibre et un PC moderne il est difficile à visiter. Alors avec un GSM… il va manquer beaucoup de choses ! je vous conseille de simplifier (beaucoup) les videos, popup et autres fuites à trafic.

Merci pour la remarque mais j'ai pourtant compresser toutes les images et je ne sais pas comment faire à part des suppressions ...

[FredVig]

il faut simplifier, petite images, plus de pages et moins d'images par page, pas d'effets d'ombrage, moins de videos etc.
Le principe d'arrières-plans "fixes" successif est difficile à maîtriser sur Jimdo. la structure des site avec ces div imbriquées à l'infini - chaque avec ses marges gauche droite - n'est pas adaptée.
Revoyez tous les éléments imbriqués, supprimez les marges, vérifiez que les contenants imbriqués s'adaptent à la largeur de fenêtre.
Ce n'est pas le cas actuellement : une image à 100% de width,, c'est une image à la largeur de son contenant. Si le contenant a une taille plus large que la fenêtre…

[tachi300]

Merci Fred je vais travailler dessus ... merci !

Par exemple dans mes div qu'est qui est superflu ...

<div style="display: block!important;margin-left: -335px;margin-right: -335px;">
   <div style=
   "background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=origxorig:format=jpg/path/s7f509d59e0e1454c/image/idf1d622d646600df/version/1506427495/image.jpg); background-size: cover; background-attachment: fixed; background-position: center; width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">

   </div>
</div>

j'ai deux Width et deux margin

[FredVig]

c'est pas ça le problème, ce sont les contenants successifs autour ces éléments.

[tachi300]

Je comprend pas...

[FredVig]

[tachi300]

Je comprend avec le croquis ... donc impossible que l'image qui fait 100% de la largeur ne peut plus s'adapter à la fenêtre du navigateur smartphone ... c'était pourtant un tuto officiel de Jimdo expert

[tachi300]

Finalement j'ai caché les images pleine largeur pour les écran en dessous de 1024px de résolution et j'ai aussi caché des éléments pour l'affichage sous smartphone et je suis très content du résultat ... merci Fred

[FredVig]

Bien joué ! C'est une bonne solution, car les connections des GSM ont du mal a afficher les images et contenus "lourds".

[tachi300]

Merci Fred j'apprend de plus en plus avec le forum

[FredVig]

Si tu peux visualiser sur un très grand écran, les blocs d'images sont un peu étroits.
(c'est seulement une minorité des visiteurs, plutôt négligeable)
https://i.servimg.com/u/f62/14/64/54/63/m10.jpg

[tachi300]

C'est sur un écran de combien ? 27" ou 2560x1440 en résolution ? mes images font 1920x1080 d'origine ils faudrait que je trouve des images plus grande ou c'est les marges ... ma div :

<div style="display: block!important;margin-left: -335px;margin-right: -335px;">
<div style=
"background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=origxorig:format=jpg/path/s7f509d59e0e1454c/image/i0db4282b57c942c1/version/1495028661/image.jpg); background-size: cover; background-attachment: fixed; background-position: center; background-position: center; box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.9); width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">
<div class="j-calltoaction-wrapper j-calltoaction-align-2 centragebouton">
<a class="j-calltoaction-link j-calltoaction-link-style-2 centragebouton" data-action="button" href="/news" data-title="news">NEWS</a>
</div>
</div>
</div>

[FredVig]

Ce sont les marges.
Tu peux mettre des valeurs relatives à la largeur de fenêtre
margin-left: -30vw;
margin-right: -30vw;
27 pouce et plus, ce n'est pas courant (2% des visiteurs) ça vaut pas la peine de s'embêter.

[tachi300]

Merci Fred ... je vais essayer ! pourquoi -30 et vw c'est quoi ...

[FredVig]

Une unité relative à la largeur de fenêtre.
100 vw c'est la largeur de fenêtre navigateur

[tachi300]

Ok merci

[tachi300]

J'ai fait la première photo pour essai ! ça donne bien ...

[Contenu sponsorisé]