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
    http://css-tricks.com/perfect-full-p...kground-image/
    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
      www.cookzh.com

      Commentaire


      • #4
        Re : image background responsive

        Ton site est ko en ce moment
        Error displaying the error page: Application Instantiation Error
        Formation Joomla agence internet https://www.stylitek.com
        Melijoy création de site Joomla compétitif https://www.melijoy.fr
        agence web spécialiste référencement http://www.agence-web-stylitek.fr

        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
          Formation Joomla agence internet https://www.stylitek.com
          Melijoy création de site Joomla compétitif https://www.melijoy.fr
          agence web spécialiste référencement http://www.agence-web-stylitek.fr

          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 :
              http://caniuse.com/
              Exemple : flex et flexbox
              http://caniuse.com/#search=flex
              “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

              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
                  Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
                  ---
                  UP, un plugin "couteau suisse" à 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..
                    http://voormedia.com/blog/2012/11/re...-aspect-ratios
                    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
                          Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
                          ---
                          UP, un plugin "couteau suisse" à 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 le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                            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
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins
                              Travaille ...
                              X