1
votes

Comment réparer l'image d'arrière-plan de mon pied de page pour qu'elle soit toujours visible sur un appareil mobile?

Mon site Web est https://www.pisqueya.com

J'ai une grande image d'arrière-plan pleine largeur toujours visible en bas de toutes les pages, cela fonctionne bien sur le bureau mais pas sur les appareils mobiles.

Quelqu'un sait ce que je manque avec mon code ci-dessous pour résoudre ce problème s'il vous plaît?

< pré> XXX

html css mobile background footer

2 commentaires

Merci d'avoir fourni votre CSS, mais pouvez-vous également fournir le code HTML pertinent? Il est assez difficile de répondre à cette question sans pouvoir savoir quels éléments vous essayez de cibler / d'exclure. Cela vous aiderait si vous pouviez mettre à jour votre question pour répertorier tous le code pertinent dans un minimal, complet et vérifiable exemple . Si votre HTML est généré côté serveur, pourriez-vous s'il vous plaît publier le résultat . Pour plus d'informations, veuillez consulter l'article d'aide concernant comment poser de bonnes questions : )

veuillez créer un extrait de code de votre code et votre image sera visible sur le mobile. Merci

3 Réponses :

0
votes

Changez votre CSS

body {
    font-family: portuguesa;
    height: 100%;
    overflow: hidden;
    position: relative;
}
/*Add This CSS*/
    body::after {
        background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed #fdeae1;
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background-size: contain;
        z-index: -1;
    }

3 commentaires

Merci les gars mais après avoir essayé toutes vos solutions, cela ne fonctionne pas: (Vous pouvez vérifier la source de mon code pour voir que j'ai appliqué le CSS mais il n'y a pas de changement sur le frontend pour mobile :(

J'ai vérifié sur Google Chrome avec l'iPhone-6/7/8 fonctionnant bien

Ok merci beaucoup, pour moi cela ne fonctionne pas sur S7 + Chrome et le navigateur Samsung :(

0
votes

Ça me va. Le problème, c'est que lorsque vous êtes sur un écran plus petit, l'image devient également petite.

Si vous souhaitez utiliser la même image, vous devez modifier la valeur de background-size pour les appareils mobiles ou utiliser une image différente pour eux.

J'espère que cela peut aussi être utile. https://www.w3schools.com/cssref/css3_pr_background-size.asp

Meilleures salutations.

0 commentaires

0
votes

Vous pouvez utiliser des requêtes multimédias CSS pour un appareil mobile. Ajoutez le CSS de requête multimédia pour la taille de l'appareil mobile et insérez-y votre code CSS. Le code suivant vous aidera.

<style>
@media only screen and (max-width:768px) and (min-width:200px)
{
   body {
   font-family: portuguesa;
   height: 100%;
   overflow: hidden;
   position: relative;
 }

 body::after {
    background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed #fdeae1;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-size: contain;
    z-index: -1;
  }
}

0 commentaires