image background responsive

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] image background responsive

    Bonjour !
    J'ai un petit soucis avec une image en background, que je souhaiterais rendre responsive. Actuellement, sur mobile/ipad, le rendu de l'accueil est affreux parce que cette image est remplacée par un truc noir
    J'ai suivi les conseils de ce liens
    Four techniques are explored on accomplishing a full page background image that conforms to our exceptions: no white space, scales as needed, retains aspect ratio, centered, and more.

    Mais le résultat est le même qu'au départ : l'image s'affiche très bien sans s'étirer, mais ça ne change rien au problème du mobile.
    J'ai récupéré le code d'un slider responsive que j'ai sur le site, et j'ai essayé de l'affecter au fichier .css du background, mais ça n'a rien donné !
    quelqu'un aurait-il une superbe idée ???

    Merci d'avance !!

  • #2
    Re : image background responsive

    Bonjour Herbet,

    Le code CSS de css-tricks.com est le bon pour que l'image s'étire en fond de page. Perso, j'utilise un CSS3 avec background-size: cover; proche de celui indiqué sur ce site.

    Si l'image est remplacée par du noir sur mobile ou iPad c'est peut-être parce que le template a prévu de ne pas mettre d'image sur les écrans de petite dimension en utilisant par exemple des CSS3 media queries. C'est parfois le cas pour ne pas alourdir le chargement de la page pour les mobiles par une grande image.

    Sans le lien du site c'est difficile de voir se qui se passe.

    Amicalement,
    Rajoz

    Commentaire


    • #3
      Re : image background responsive

      Merci !
      Euh... CSS3, je ne comprends pas comment ça se paramètre ça. Il faut une extension particulière ? (pardon si la question est idiote)

      Normalement, mon template est parfaitement responsive. Mais dans sa forme originale, le support m'a indiqué qu'ils n'avaient pas prévu que l'image de background soit responsive. A la place, ils mettaient un module slider qui, lui l'était.

      Mais ça n'est pas dans l'idée de mon site

      Commentaire


      • #4
        Re : image background responsive

        Ton site est ko en ce moment
        Error displaying the error page: Application Instantiation Error
        Auto-entrepreneur spécialiste Joomla https://www.stylitek.com

        Joomladay 2023 https://www.joomladay.fr/ 2 jours à ne pas manquer

        Commentaire


        • #5
          Re : image background responsive

          Euh... CSS3, je ne comprends pas comment ça se paramètre ça. Il faut une extension particulière ? (pardon si la question est idiote)
          Les CSS3 sont la nouvelle génération de css, ils permettent d'aller plus loin avec des ombres, des angles, ...
          Tu n'as rien a rajouter, tu as juste à les utiliser, par contre ce n'est pas forcément évident car ils ne sont pas compatible avec toutes les versions des navigateurs, donc il faut encore souvent utiliser des hack
          Auto-entrepreneur spécialiste Joomla https://www.stylitek.com

          Joomladay 2023 https://www.joomladay.fr/ 2 jours à ne pas manquer

          Commentaire


          • #6
            Re : image background responsive

            Merci pour vos réponses...
            ça y est le site est de nouveau en ligne

            Commentaire


            • #7
              Re : image background responsive

              Salut,
              Tu n'as rien a rajouter, tu as juste à les utiliser, par contre ce n'est pas forcément évident car ils ne sont pas compatible avec toutes les versions des navigateurs, donc il faut encore souvent utiliser des hack
              Je confirme à 150%. XD

              Un site indispensable pour vérifier si tel ou tel navigateur supporte ou non cette nouvelle fonctionnalité CSS3 super chouette :
              web browser compatibility support html css svg html5 css3 opera chrome firefox safari internet explorer

              Exemple : flex et flexbox
              web browser compatibility support html css svg html5 css3 opera chrome firefox safari internet explorer
              Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

              Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

              Commentaire


              • #8
                Re : image background responsive

                Arf; voilà que ça devient trop complexe pour moi
                en fait je voulais juste savoir comment rendre mon image de background responsive, car effectivement je m'étais aperçu que les codes de CSS permettent juste une meilleure navigation sur ordinateur.
                J'ai vu une extension qui s'apelle joomla mobile. Est-ce que ça pourrait être utile ? Tout le site est responsive sauf cette fichue image !
                Je viens déjà de planter mon site en essayant de modifier les css... je crois que je ne suis pas encore au point. Donc, voilà, si vous avez une solution je suis preneur !!

                Commentaire


                • #9
                  Re : image background responsive

                  Bonsoir,

                  Tu peux essayer mon module bgmax en mode cover.
                  Il évite de toucher aux css
                  Voila une doc rapide: http://lomart.fr/bgmax/actualite-doc...on-rapide.html
                  UP, le plugin universel à découvrir sur https//up.lomart.fr
                  bgMax
                  , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                  Commentaire


                  • #10
                    Re : image background responsive

                    j'ai également essayé de lire ça..

                    mais c'est un peu nébuleux;
                    J'ai reéssayé les différents codes, mais ce que ça change au mieux... c'est que ma page d'accueil est flinguée

                    Commentaire


                    • #11
                      Re : image background responsive

                      Alors j'ai effectivement installé bgmax. Mais franchement ça me semble de trop haut niveau. Dès le début, la phrase "une fois que vous avez isolé le sélecteur qui englobe le contenu de votre site" me met hors jeu )
                      Pourtant il a l'air super ton module

                      Commentaire


                      • #12
                        Re : image background responsive

                        Il y a aussi Joomla Mobile, mais je ne vois pas trop l'intéret d'avoir un template responsive dans ce cas....
                        Je suis sûr qu'il y a une solution dans les codages proposés par CSS trick; mais je suis trop manche pour la comprendre

                        Commentaire


                        • #13
                          Re : image background responsive

                          Dès le début, la phrase "une fois que vous avez isolé le sélecteur qui englobe le contenu de votre site" me met hors jeu )
                          Tant que tu ne pourra pas répondre à cette question, tu ne pourras rien faire ni avec bgmax ni encore moins en codant à la main.

                          Je viens de regarder ton site,
                          1/ bgmax ne convient pas car ce n'est pas le background du body qu'il faut adapter
                          2/ l'image que tu veux en responsive a un format paysage, il est impossible de la mettre en portrait sans couper le texte
                          Donc, il faut donc dissocier l'image du texte.
                          Je ne sais pas comment est construit ce template mais il faudrait mettre un module personnalisé en jsn-header-top avec le texte de la photo. Je crains qu'il faille toucher à l'index.php pour y arriver
                          UP, le plugin universel à découvrir sur https//up.lomart.fr
                          bgMax
                          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                          Commentaire


                          • #14
                            Re : image background responsive

                            Il y a qd même des petits réglages à faire.
                            - ton image est trop lourde, pres de 1 mo, et pourrait être moins large. De plis, cela ralentit le chargement de la page.
                            ton image, dimensions : 4896 × 3264
                            l'image du site de demo de ton template : 1922 × 1081
                            Tu peux te baser sur ces dimensions.

                            Ceci fait, dans custom.css :
                            cherche cette ligne et rajoute max-width: 100%;
                            @media only screen and (max-width: 480px), (max-device-width: 480px) {
                            .jsn-homepage #jsn-header-top {
                            background-size: auto 100% !important;
                            max-width: 100%;
                            padding: 70px 0 !important;
                            }
                            }
                            Ou au pire, tu rajoute une règle en dessous de .jsn-homepage #jsn-header-top:
                            .jsn-homepage #jsn-header-top img {max-width: 100%;}

                            Même chose pour un iPad et/ou une tablette:

                            *Landscape

                            @media only screen and (max-width: 1024px), (max-device-width: 1024px){
                            {}
                            }
                            * Portrait

                            @media only screen and (max-width: 768px), (max-device-width: 768px){
                            {}
                            }
                            Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                            Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                            Commentaire


                            • #15
                              Re : image background responsive

                              Envoyé par lomart Voir le message
                              2/ l'image que tu veux en responsive a un format paysage, il est impossible de la mettre en portrait sans couper le texte
                              Donc, il faut donc dissocier l'image du texte.
                              Je ne sais pas comment est construit ce template mais il faudrait mettre un module personnalisé en jsn-header-top avec le texte de la photo. Je crains qu'il faille toucher à l'index.php pour y arriver
                              Ah ça peut expliquer pourquoi je n'ai jamais réussi à installer un module photo à cet endroit ?

                              Vu la photo il est difficile de la séparer du texte, car il n'y a de place pour le texte qu'en haut à droite....

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X