Les images background-image n'apparaissent pas

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Les images background-image n'apparaissent pas

    Salut

    Je suis en train de faire notre site en local et j'ai mis en ligne un premier jet pour que les autres puissent donner leurs avis. Mais je me suis rendu compte que les images que j'ai insérée avec background-image n'apparaissent pas. Il y en as 2 : une derrière l’en-tête du site (la sorcière et le poing) et une autre derrière le titre des modules. C'est le même style d'image, un bandeau noir, mais c'est 2 fichiers différents.

    Pour l’en-tête :

    dans le fichier less :
    Code HTML:
    background-image:url("../../../images/background.png");
    en regardant avec l'inspecteur de Firefox :
    Code HTML:
    background-image: url('//images/background.png');
    Pour le titre des modules :

    dans le fichier less :
    Code HTML:
    background-image:url("../../../images/mod-titre-background.png");
    en regardant avec l'inspecteur de Firefox :
    Code HTML:
    background-image: url('//images/background.png');
    Pourquoi ça m’enlève les points du chemin de l'url relative ???

    Joomla 3.8.12

  • #2
    Bonjour,

    Pourquoi mettre une notation par points, puisque le dossier est en racine du site.
    en LESS, cela doit convenir :
    Code:
     
     background-image:url("/images/background.png");
    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


    • #3
      Non ça ne marche pas. Voila ce que ça donne :
      Code HTML:
      background-image: url('/templates/shaper_helix3/css//images/mod-titre-background.png');
      Et si j’enlève le / avant images ça donne la même chose mais dans le double /.
      Dernière édition par Visiteur à 22/09/2018, 13h34

      Commentaire


      • #4
        Je ne comprends pas comment :
        Code:
         
         background-image:url("/images/background.png");
        peut être compilé par LESS en :
        Code:
         
         background-image: url('/templates/shaper_helix3/css/images/mod-titre-background.png');
        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


        • #5
          D'autant plus qu'avec la notation par points, en local ça marche bien. Et si je met /images/background.png ca ne marche plus. Sur un autre site que je gère, j'ai mis une image en background avec les points et elle s'affiche bien (sur ce site aussi j'utilise LESS).

          Commentaire


          • #6
            Pour le titre des modules :

            dans le fichier less :
            Code HTML:

            background-image:url("../../../images/mod-titre-background.png");
            en regardant avec l'inspecteur de Firefox :
            Code HTML:

            background-image: url('//images/background.png');
            Pourquoi ça m’enlève les points du chemin de l'url relative ???
            Dans le fichier CSS, il y a quoi ?
            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


            • #7
              Bonjour.

              Si c'est cette image qui doit s'afficher
              background image
              Dans ton css, indique simplement
              Code:
              background: url('background: url('/images/mod-titre-background.png');
              L'image n'étant pas dans ton template mais dans le répertoire d'images à la racine, inutile d'indiquer le chemin vers le répertoire images du template !
              aime ceci.
              Cordialement.
              __
              Eddy !!!
              Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

              Commentaire


              • #8
                Envoyé par lomart Voir le message
                Dans le fichier CSS, il y a quoi ?
                Dans le LESS j'ai donc gardé sans les points. Dans le CSS ça donne ça :

                Pour l’en-tête :
                Code HTML:
                background-image: url("/images/background.png");
                Pour les titres des modules :
                Code HTML:
                background-image: url("/images/mod-titre-background.png");
                Mais quant je regarde avec l'inspecteur j'ai toujours :

                Code HTML:
                background-image: url('/templates/shaper_helix3/css//images/background.png');
                et

                Code HTML:
                background-image: url('/templates/shaper_helix3/css//images/mod-titre-background.png');
                Envoyé par Eddy.vh Voir le message
                Bonjour.
                Si c'est cette image qui doit s'afficher
                background image
                Dans ton css, indique simplement
                Code:
                background: url('background: url('/images/mod-titre-background.png');
                L'image n'étant pas dans ton template mais dans le répertoire d'images à la racine, inutile d'indiquer le chemin vers le répertoire images du template !
                Oui c'est bien celle-ci, mais j'utilise LESS.
                Dernière édition par Visiteur à 22/09/2018, 15h50

                Commentaire


                • #9
                  Oui c'est bien celle-ci, mais j'utilise LESS.
                  LESS est un préprocesseur qui sert uniquement à créer le fichier CSS qui sera traité par le navigateur

                  L'image étant bien en racine du site, elle est accessible comme le dit Eddy par la syntaxe /images/background.png. Je l'avais déjà dit dans mon post #2

                  Il faudrait commencer par désactiver le compresseur de CSS, on y verra plus clair !
                  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
                    Dans Helix j'ai désactivé la compression CSS. Là l'image apparait bien.

                    Commentaire


                    • #11
                      Envoyé par aman-komunak Voir le message
                      Dans Helix j'ai désactivé la compression CSS. Là l'image apparait bien.
                      Donc ce n'était pas un problème LESS ou CSS, mais un souci de mise à jour

                      Il ne reste qu'a mettre le sujet comme [réglé]
                      Dernière édition par lomart à 22/09/2018, 16h38
                      aime ceci.
                      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


                      • #12
                        C'est surement à cause de ça que je devais vider le cache Joomla avant d'actualiser la page à chaque fois que je faisais une modif de mon LESS. Maintenant il me suffis juste d'actualiser la page.

                        Merci à vous 2 pour votre aide

                        Commentaire


                        • #13
                          La règle de base : la compression, c'est une fois le site en production
                          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
                            Mais je ne comprend pas un truc : si mon probleme à disparu après avoir désactivé la compression, si je l'active il va revenir.

                            Commentaire


                            • #15
                              Envoyé par aman-komunak Voir le message
                              Mais je ne comprend pas un truc : si mon probleme à disparu après avoir désactivé la compression, si je l'active il va revenir.
                              Il faut faire le test pour vérifier. mais souvent, il faut relancer la compression pour ne pas rester sur une vielle version
                              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

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X