- WordPress :5.8
- Statut : résolu
- Ce sujet contient 17 réponses, 2 participants et a été mis à jour pour la dernière fois par
, le il y a 2 années et 1 mois.
-
Messages
-
Bonjour,
Ma configuration WP actuelle
- Version WordPress : 6.0.1
- Version de PHP/MySQL : 7.4 / 10.5.16-MariaDB
- Thème utilisé : Astra version 3.9.1
- Extensions en place : Astra Pro version 3.9.1, Advanced Database Cleaner, EWWW Image Optimizer
- Nom de l’hébergeur : o2switch
- Adresse du site : Problème rencontré sur la totalité des sites.
Problème(s) rencontré(s) :
Bonjour,
Comme le titre l’indique, lorsque l’arrière-plan du bloc bannière est fixé, l’image est zoomée. Non seulement elle est tronquée mais elle perd en qualité.
A savoir que j’utilise des images de 1920px de largeur. Je souhaiterais donc pouvoir fixée l’arrière-plan afin d’avoir un effet parallax tout en gardant la taille normale des images.
Je n’ai toujours pas réussi à régler ce problème…
Voir les captures d’écrans ci-jointes.
Merci de vos réponses!
Thomasvotre image est peut-être moins haute que la hauteur de votre écran ?
si c’est le cas, l’image est agrandie en hauteur et c’est l’effet de zoom que vous voyez. pour mieux comprendre ce qu’il se passe, allez dans la console de développement et désactivez la règle css « background-size : cover », vous verrez la répétition de l’image en hauteur.
Bonjour Mathieu,
Merci de votre réponse.Effectivement l’image est moins haute que la hauteur de l’écran. Elle est de 1920px par 600px. Je spécifie donc une hauteur de 600px dans les réglages du bloc.
Ceci dit, l’effet de zoom est également présent pour une image pleine hauteur (1080px) lorsque l’on fixe l’arrière plan…
J’avais déjà remarqué que l’image se répétait lorsque je désactivais la règle css « background-size : cover ».
Cela voudrais dire que l’on ne peut fixer l’arrière-plan du bloc bannière uniquement pour des images de 1920px par 1080px, à moins d’avoir cet effet désagréable?
Effet qui malheureusement est également présent pour des images pleine hauteur…Donc dans ce cas comment avoir un effet parallax lorsque l’on utilise une image « panoramique » de moins de 1080px de hauteur?
Et plus généralement, comment ne pas avoir cet effet de zoom?Merci encore!
Thomas
si vous ne voulez plus l’effet de zoom, il faut modifier la règle css « background-size », je ne suis pas sur de comprendre votre question.
Merci de répondre si rapidement!
Pardon, je me suis certainement mal exprimé.
Et bien j’aimerais ne plus avoir cet effet de zoom sur les images lorsque j’active l’arrière-plan fixe dans le réglage des médias du bloc bannière.
Peut importe la hauteur de l’image, quelle soit de 1080 pour une image plein écran (1920 x 1080) ou plus petite, de format « panoramique » comme dans mon cas (1920 x 600), l’image est systématiquement zoomée.Alors que lorsque l’arrière-plan n’est pas réglé sur fixe dans le réglage des médias, l’image est bien en entier sans aucun zoom, quelle que soit sa hauteur.
Nous sommes d’accord que la résolution « classique » dite HD des écrans est de 1920 x 1080.
Je ne parle pas des écrans Rétina, je pense qu’il faut attendre encore avant de développer entièrement les sites pour cette résolution…Quand à la règle css « background-size », j’ai bien essayer de la modifier mais sans succès. Certainement au mauvais endroit…
Je vous remets les captures d’écrans vous allez mieux comprendre.
(Ces captures sont prises sur une pré production en tout début de développement.)Cela fait un petit moment que je rencontre ce problème, ce sur différents sites, je peux me tromper mais ce souci n’était pas présent il y a quelques mises à jour de WordPress. Je travaille toujours avec le même thème et les mêmes extensions depuis environ 2 ans.
Merci encore de prendre le temps de me répondre!
Thomas
la plupart du temps, vous pouvez personnaliser le code css en allant dans « Apparence » -> « Personnaliser » -> « CSS additionnel ».
ensuite si vous avez besoin d’aider pour le code css à utiliser, il faudra nous donner l’url de la page parce que le code à ajouter peut dépendre du contexte.
Voici les url des pages.
C’est un serveur qui me sert de test, ce n’est pas un site en production. Je laisse cela en place quelques jours le temps de trouver la solution.Je n’ai ajouté aucun css, je n’utilise que le bloc bannière pour chacune des images.
Sur la première page l’effet de zoom est léger.
La hauteur de la bannière est réglée à 1080px. La régler à 100vh produit le même effet…Sur la 2ème page l’effet de zoom est beaucoup plus prononcé.
La hauteur de la bannière est réglée à 600px.L’idée, vous l’aurez compris, est de comprendre pourquoi WordPress se comporte ainsi et contourner ce souci…
Merci!
Thomas
essayez le code suivant dans « css additionel », le nombre 69 correspond à l’identifiant de la page, vous pouvez voir ce nombre dans l’url quand vous modifiez la page par exemple.
Bonjour Mathieu,
Merci encore de venir à mon secours!La règle fonctionne, mais maintenant l’image est centrée dans la hauteur.
Nous pouvons voir le fond gris qui correspond à l’opacité que j’ai appliqué…Je cherche du côté des règles de positionnement…
pour la position de l’image, essayez ça :
.https://developer.mozilla.org/fr/docs/Web/CSS/background-position
Sans succès, cela ne règle pas le problème de hauteur malheureusement. J’ai fais fausse piste avec les propriétés de positionnement, ou alors je suis passé à côté…
Je peux certainement me tromper, mais je pense que quelque chose fait autorité sur la valeur de hauteur de la propriété « background-size ».
Je m’explique:
En théorie, nous devons pouvoir lui appliquer 2 valeurs, la première pour la largeur et la seconde pour la hauteur.
J’ai donc essayé avec « background-size : auto auto; » et « background-size : auto 600px; ». Je n’en vois pas d’autre pour le cas présent…
La valeur de largeur est bien prise en compte, mais pas celle de la hauteur…
La solution n’est pas loin…
je n’ai pas compris de quel problème de hauteur vous parlez. si l’image ne fait pas la hauteur de l’écran c’est normal qu’on voit le fond puisque vous ne vouliez pas de l’étirement.
Donc si je comprends bien, dès lors que l’on fixe l’arrière plan, par défaut le bloc Bannière étire l’image pour atteindre des proportions « plein écran », que l’on définisse la hauteur ou pas.
Je voudrais savoir ce qui fait autorité sur la valeur de hauteur, et avoir cet effet parallax sans que l’image soit étirée, et bien sûr sans voir le fond…
Je m’exprime mal certainement…
Merci encore d’avoir prit le temps de m’aider, je trouverai la solution j’espère… Dès que je l’aurait je vous tiendrai bien sûr au courant.
Thomas
regardez cette image, c’est le fond du site sans la partie qui bouge devant
.
l’image est trop petite donc si vous ne voulez pas que l’image soit étirée, il y aura forcement des zones vides autour de l’image.
si vous ne voulez pas voir le fond, vous devez mettre une image plus grande.
Oui, c’est ce que j’ai compris..
J’ai toujours utilisé des images de 1920 x 1080 en jouant sur la taille de la bannière et en les travaillant au préalable pour centrer mon sujet.
Mais je pensais que l’on pouvait adapter le fond en fonction de la taille de l’image et du coup ne pas avoir ces zones vides.
Je « chipote » je pense.. 😉Je crois que cela est faisable avec certains Page Builder, mais je ne veux pas utiliser de surcouche, je privilégie au maximum la légèreté de mes sites, je code tout ce que je peux dans la mesure du possible..
Merci beaucoup pour votre temps!
Thomas
- Vous devez être connecté pour répondre à ce sujet.