1486 sujets

Web Mobile et responsive web design

[Résolu] Ne pas afficher une image de background sur mobile

Bonjour,

Je cherche à résoudre/optimiser un affichage de mon site en responsive.
Dans l'une de mes sections j'ai intégré une image de background. Malheureusement sur mobile elle nuit à la lecture du texte qui ne se voit plus.

Mon idée : inclure dans mon CSS qu'en dessous d'une certaine taille d'écran (mobile) - 400 px- on n'affiche plus cette image d'arrière plan.
J'ai testé ça mais sans succès : upload/1613995338-82327-capturedaeacran2021-02-22aa13.png

Est ce que quelqu'un sait comment s'y prendre, j'ai pas mal cherché sur les forums mais je n'ai pas trouvé de réponse même si je pense ne pas être la seule à avoir rencontré le souci.

Un grand merci d'avance.

Bonne journée,

Maroox
Bonjour,

peux-tu inclure ton code à l'aide des balises code (css) du forum stp ? C'est mieux pour la lisibilité et la correction des erreurs.

Dans ton appel je constate un problème, tu souhaites faire disparaitre le background-image sur div. Ça paraît être une règle peu précise non ?
En plus tu parles de section, es-tu sûre de bien cibler le bon élément ?

Et j'ajouterai qu'écrire background-image: url(..); n'est pas utile dans ton code puisqu'il est suivi d'un background-image: none;.
Merci Raphi.
J'ai effectivement pas dû bien expliquer ce que je voulais faire.

Voici mon code : 
@media (max-width: 400px) {
  div {
    background-image: url('https://www.keekoff.fr/wp-content/uploads/2021/02/LEX.png'); background-image: none;
  }
}


J'avais mis div pour désigner la section, car c'est avec elementor que je fais la page et que je peux appliquer une règle à un élément celle-ci visiblement.
En gros ce que je veux dire c'est : lorsque l'écran est plus petit que 400px (sur mobile en gros) ne pas afficher l'image de background.
Mon problème et que sur mobile mon texte se superpose à l'image ce qui le rend illisible. Ma solution la plus simple était donc de supprimer l'image d'arrière-plan sur mobile.

Peut-être qu'il y a mieux ^^
Le plus simple serait que tu fournisses l'url de ton site, si c'est possible ?
Ça permettrai de comprendre plus facilement le problème en t'apportant une réponse adaptée.
Merci,

donc dans ton code, tu as ceci, juste après l'ouverture de ta section:

<div class="elementor-background-overlay"></div>


Et le css correspondant:

.elementor-948 .elementor-element.elementor-element-8a9356e > .elementor-background-overlay {
    opacity: .5;
    transition: background .3s,border-radius .3s,opacity .3s;
}


Ce que tu peux faire c'est rajouter dans cette règle:

background-color: #fff;


Ensuite tu joues avec l'opacity pour attenuer plus ou moins ton image d'arrière-plan.

Ce qui donnerai:
upload/1614002439-39756-screenshot2021-02-22.png

Qu'en dis-tu ?
Non, si tu gardes ta règle ça ne posera pas de soucis en version desktop:

@media (max-width: 400px) {
.elementor-948 .elementor-element.elementor-element-8a9356e > .elementor-background-overlay {
    background-color: #fff;
  }
}
Effectivement, j'avais oublié de remettre ma résolutions max d'écran \o/

Un grand merci pour ton aide et ta patience Smiley smile
Sujet clos
Aller à