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

[Visiteur]

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 :

background-image:url("../../../images/background.png");

en regardant avec l'inspecteur de Firefox :

background-image: url('//images/background.png');

Pour le titre des modules :

dans le fichier less :

background-image:url("../../../images/mod-titre-background.png");

en regardant avec l'inspecteur de Firefox :

background-image: url('//images/background.png');

Pourquoi ça m’enlève les points du chemin de l'url relative ???

Joomla 3.8.12

[lomart]

Bonjour,

Pourquoi mettre une notation par points, puisque le dossier est en racine du site.
en LESS, cela doit convenir :

 
 background-image:url("/images/background.png");

[Visiteur]

Non ça ne marche pas. Voila ce que ça donne :

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 /.

[lomart]

Je ne comprends pas comment :

 
 background-image:url("/images/background.png");

peut être compilé par LESS en :

 
 background-image: url('/templates/shaper_helix3/css/images/mod-titre-background.png');

[Visiteur]

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).

[lomart]

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 ?

[Eddy.vh]

Bonjour.

Si c'est cette image qui doit s'afficher

Dans ton css, indique simplement

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 !

[Visiteur]

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 :

background-image: url("/images/background.png");

Pour les titres des modules :

background-image: url("/images/mod-titre-background.png");

Mais quant je regarde avec l'inspecteur j'ai toujours :

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

et

background-image: url('/templates/shaper_helix3/css//images/mod-titre-background.png');

Bonjour.
Si c'est cette image qui doit s'afficher

Dans ton css, indique simplement

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.

[lomart]

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 !

[Visiteur]

Dans Helix j'ai désactivé la compression CSS. Là l'image apparait bien.

[lomart]

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é]

[Visiteur]

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

[lomart]

La règle de base : la compression, c'est une fois le site en production

[Visiteur]

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.

[lomart]

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