impossible de charger une image

[chaynouhmoya]

bonjour,
est-ce que vous pouvez m'aider à afficher mes images:
je suis sur joomla 3.4 et depuis bootstrap mes images utilisées dans les background ne s'affichent pas dans mon site www.fondation-fikr.ma sur ADK et merci

[PieceOfCake]

Re : impossible de charger une image

Bonjour,

ça manque un peu d'information pour pouvoir t'aider, non ?

Par exemple le nom des images qui ne s'affichent pas, leur emplacement ?

Quand on visite l'url fournie tout semble correct, à un détail prêt, l'accès au source HTML de ta page montre qu'il y a un copier/coller depuis un document Word qui a peu de chances de fonctionner, mais je ne suis pas sûr que cela ait à voir avec ta demande

Cordialement

[Artikult]

Re : impossible de charger une image

Bonjour,

Est ce que tes images sont bien dans le dossier ../images de ton template ? Car ton css ne prend pas le dossier /images du dossier source.

cdlt.

[toffffe]

Re : impossible de charger une image

Salut
Où devrait il y avoir des images en background ?

[chaynouhmoya]

Re : impossible de charger une image

merci pour votre réponse
mes images sont dans le dossier images
la ligne dans template:
.header {
margin-bottom: 0px;
background: url('images/fikr-desc.png') left top no-repeat;
}
ça fonctionne pour le background color mais pas pour les images

[Artikult]

Re : impossible de charger une image

Essai ceci

.header {
background: rgba(0, 0, 0, 0) url("../images/fikr-desc.png") no-repeat scroll right top;
margin-bottom: 0;
}

J'ai changé "left" par right car ton image logo passe dessus.

cdlt

[chaynouhmoya]

Re : impossible de charger une image

Bonjour,

ça manque un peu d'information pour pouvoir t'aider, non ?

Par exemple le nom des images qui ne s'affichent pas, leur emplacement ?

Quand on visite l'url fournie tout semble correct, à un détail prêt, l'accès au source HTML de ta page montre qu'il y a un copier/coller depuis un document Word qui a peu de chances de fonctionner, mais je ne suis pas sûr que cela ait à voir avec ta demande

Cordialement

merci beaucoup, j'ai résolu le problème. j'ai fait une erreur de débutant

[Rajoz]

Re : impossible de charger une image

Bonjour chaynouhmoya,

Il y a deux problèmes dans le CSS :

1) Adresse de l'image

Les charmes du relatif et de l'absolu...

Avec la syntaxe utilisée url('images/fikr-desc.png') le CSS considère cette adresse comme relative et calcule l'adresse à partir de celle du CSS qui est ici templates/protostar/css/template.css il va donc chercher l'image dans templates/protostar/css/images/fikr-desc.png" et ce n'est pas là où elle se trouve.

En pratique url() attend une adresse absolue ou bien une adresse relative par rapport à l'adresse du CSS qui l'appelle :

• adresse absolue : url('http://www.fondation-fikr.ma/images/fikr-desc.png')
• adresse absolue : url('/images/fikr-desc.png') : le "/" indique la racine du site
• adresse relative : url('../../../images/fikr-desc.png')
  • les ../ indiquent qu'il faut descendre d'un niveau
  • comme on est dans templates/protostar/css/ il en faut 3 pour revenir à la racine du site

Un bon moyen de se rendre compte de ce type de problème c'est d'utiliser Firebug ou l'Inspecteur d'éléments de Chrome et d'essayer d'afficher l'image : cela donne l'adresse calculée par le CSS et indique si elle est bonne ou pas (erreur 404).

2) Position de l'image

L'image est affichée en haut à gauche du header c'est-à-dire juste derrière le logo qui la masque.

Pour visualiser le problème on peut par exemple :

• faire dépasser l'image du logo en la répétant vers la droite :
  background: url('/images/fikr-desc.png') left top repeat-x;
• positionner l'image en haut à droite :
  background: url('/images/fikr-desc.png') right top no-repeat;

Amicalement,
Rajoz

[MODIF] Me suis fait griller, à une minute près j'apportais la solution [/MODIF]

[chaynouhmoya]

Re : impossible de charger une image

Essai ceci

.header {
background: rgba(0, 0, 0, 0) url("../images/fikr-desc.png") no-repeat scroll right top;
margin-bottom: 0;
}

J'ai changé "left" par right car ton image logo passe dessus.

cdlt

merci infiniment, c'est résolu

[chaynouhmoya]

Re : impossible de charger une image

Bonjour chaynouhmoya,

Il y a deux problèmes dans le CSS :

1) Adresse de l'image

Les charmes du relatif et de l'absolu...

Avec la syntaxe utilisée url('images/fikr-desc.png') le CSS considère cette adresse comme relative et calcule l'adresse à partir de celle du CSS qui est ici templates/protostar/css/template.css il va donc chercher l'image dans templates/protostar/css/images/fikr-desc.png" et ce n'est pas là où elle se trouve.

En pratique url() attend une adresse absolue ou bien une adresse relative par rapport à l'adresse du CSS qui l'appelle :

• adresse absolue : url('http://www.fondation-fikr.ma/images/fikr-desc.png')
• adresse absolue : url('/images/fikr-desc.png') : le "/" indique la racine du site
• adresse relative : url('../../../images/fikr-desc.png')
  • les ../ indiquent qu'il faut descendre d'un niveau
  • comme on est dans templates/protostar/css/ il en faut 3 pour revenir à la racine du site

Un bon moyen de se rendre compte de ce type de problème c'est d'utiliser Firebug ou l'Inspecteur d'éléments de Chrome et d'essayer d'afficher l'image : cela donne l'adresse calculée par le CSS et indique si elle est bonne ou pas (erreur 404).

2) Position de l'image

L'image est affichée en haut à gauche du header c'est-à-dire juste derrière le logo qui la masque.

Pour visualiser le problème on peut par exemple :

• faire dépasser l'image du logo en la répétant vers la droite :
  background: url('/images/fikr-desc.png') left top repeat-x;
• positionner l'image en haut à droite :
  background: url('/images/fikr-desc.png') right top no-repeat;

Amicalement,
Rajoz

[MODIF] Me suis fait griller, à une minute près j'apportais la solution [/MODIF]

merci beaucoup de cet effort. j'ai pu apprendre de bonnes choses