Changement d'opacité de l'image de fond en version mobile

WordPress :6.5
Statut : résolu

Ce sujet contient 8 réponses, 2 participants et a été mis à jour pour la dernière fois par vcab, le il y a 3 semaines et 1 jour.

9 sujets de 1 à 9 (sur un total de 9)

Auteur

Messages
27 août 2024 à 15 h 58 min #2479356
vcab
Participant

Initié WordPress
9 contributions
Bonjour,

Ma configuration WP actuelle est la 6.6.1
- Version de PHP/MySQL :
- Thème utilisé : twenty twenty four
- Extensions en place :
- Nom de l’hébergeur : LWS
- Adresse du site : kravmagavalence.com
Problème(s) rencontré(s) :

Bonjour, je débute sur wordpress et je bute sur un problème technique. Sur une page j’ai une bannière contenant une image de fond et un texte. J’aimerai opacifier l’image de fond sur une vue mobile afin qu’elle ne rende pas le texte illisible. En version ordinateur l’image ne gène pas le texte, mais dès que je bascule en vue mobile tout se centre et cela rend plus compliqué la lecture.

J’ai tenté d’arpenter le web pour contourner le problème avec des classe CSS mais je n’arrive pas à faire fonctionner cela…

Quelqu’un pourrait m’aider s’il vous plait ?

Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.
27 août 2024 à 15 h 59 min #2479360

Joss47
Modérateur

Maître WordPress
5265 contributions

Salut,

Compliqué vu que le site est en mode maintenance de t’aider.

27 août 2024 à 16 h 44 min #2479362

vcab
Participant

Initié WordPress
9 contributions

Désolé, je viens de désactiver la maintenance temporairement pour que vous puissiez y jeter un œil.

27 août 2024 à 16 h 49 min #2479364
Joss47
Modérateur

Maître WordPress
5265 contributions
Ajoute cela a ton style.Css du child theme ou dans Apparence > Personnaliser > CSS Additionnel :
```
@media screen and (max-width: 992px) {
    .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-10, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10, .wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-10, .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10 {
 opacity: 0.5 !important;
  }
}
```
27 août 2024 à 17 h 06 min #2479365

vcab
Participant

Initié WordPress
9 contributions

Oh super merci, ça fonctionne parfaitement !

Et dans le cas où je voudrais que cela ne s’applique qu’à la page d’accueil, quel serait l’ajout de code s’il te plait ?

27 août 2024 à 17 h 11 min #2479367

Joss47
Modérateur

Maître WordPress
5265 contributions

Mais… ça ne s’applique déjà que sur l’élément que tu as indiqué.

27 août 2024 à 17 h 23 min #2479372

vcab
Participant

Initié WordPress
9 contributions

Non, ça a l’air de s’appliquer à toutes les images situées dans une bannière. Par exemple sur la page contact on peut voir que l’image passe en noir et blanc quand on la redimensionne la fenêtre pour la réduire en dessous de 992 px.

27 août 2024 à 17 h 24 min #2479375

Joss47
Modérateur

Maître WordPress
5265 contributions

En effet mais cela n’a rien à voir avec le code que je t’ai donné, y’a un autre overlay à .3 en réglage

Donc comme je l’ai indiqué le code donné fonctionne très bien que sur l’accueil

Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.

27 août 2024 à 17 h 42 min #2479377

vcab
Participant

Initié WordPress
9 contributions

Oui, effectivement, le calque et l’opacité de superposition de cette image devaient rentrer en conflit avec le code. J’ai remis à zéro les réglages en enlevant le calque de superposition et régler juste l’opacité et maintenant cela fonctionne parfaitement.

Un grand merci à toi, tu viens de me sauver la journée !
Auteur

Messages