Catégories:
Bonjour,
je suis actuellement entrain de créer un site internet à partir du thème zen.
J’aimerais mettre une image de fond à mon header mais je n’y arrive pas… (je n’y arrive pas non plus avec les autres régions).
J’utilise la notation : background-image : url(«images/mon_image.png») ; qui me semble être la bonne.
J’ai essayé de faire les modifications sur les fichiers layout-liquid.css, page-backgrounds.css et block.css le résultat est le même à chaque fois…rien !
Ce que je ne comprend pas c’est que lorsque je met une couleur de fond (background-color : #CC48A1) ça fonctionne.
Est ce que quelqu’un pourrait m’éclairer ?
Merci
- Vous devez vous identifier ou créer un compte pour écrire des commentaires
Bonsoir,
Sauf à supposer que le chemin vers l’image n’est pas bon, mais vous avez certainement vérifié ce point, peut-être est-ce lié à l’image elle-même ? Votre png est-il en 32 bis que ne pourrait afficher votre navigateur ? Avez-vous essayé avec un autre type d’image (par exemple un jpeg) ?
Aide-toi, le ciel t’aidera !
Marina_Kha
1827
Merci pour ta réponse Marina_Kha.
J’ai bien vérifié le chemin et en principe je ne fais pas d’erreur, mais je ne peux être sûre étant donné que l’image ne s’affiche pas.
J’ai essayé les formats png et jpg, avec différentes images mais toujours rien :(
Je continue de chercher.
prunune
28
Pour vérifier si le chemin de l’image est bon, avec Firebug il suffit de survoler la propriété CSS correspondante et une vignette de l’image doit apparaître. Si vous voyez un petit rond qui tourne à la place, c’est que l’image n’est pas trouvée.
Il faut se méfier de Zen (très bien par ailleurs) pour les chemins : il cherche parfois par rapport au thème de base au lieu du sous-thème.
Au pire, vous pouvez indiquer un chemin absolu pour l’image et voir si ça fonctionne.
Numerizen
1822
Merci Numerizen !
Alors, je viens d’installer Firebug que je n’avais pas encore…
Je ne suis pas sûre de ce que je dois survoler. Je suppose que c’est le header vu que c’est là que j’essaye de faire apparaître mon image, mais quand je le survole rien ne se passe, ni vignette ni petit rond qui tourne :(
J’ai essayé de mettre mon image dans le thème Zen de base mais apparemment ce n’est pas ça non plus.
J’ai aussi essayé avec le chemin absolu, ce qui donne ça si je ne me trompe pas :
/home/moi/drupal/sites/all/themes/theme_perso/images/logo2.jpg
Et toujours rien.
Bon…je continue encore et encore à chercher.
prunune
28
Non, le chemin absolu en format Web, URL quoi : http://lesite.com/le_chemin/de/l_image/limage.png.
Dans Firebug, il faut regarder dans les propriétés CSS, le cadre à droite, après avoir sélectionné le bon élément dans le HTML ou avec la méthode que vous avez utilisée par rollover.
Il doit y avoir une propriété background-image. C’est celle-là qu’il faut survoler et voir si c’est petit rond ou vignette.
Numerizen
1822
Ok, j’ai réessayé avec le chemin absolu, pour de vrai cette fois et ça ne fonctionne pas non plus.
Pour Firebug, comme je viens tout juste de l’installer il va me falloir un peu de temps pour l’apprivoiser mais ça me parait assez simple.
J’ai tout de même regardé le css comme tu m’as conseillé et la propriété background-image n’apparaît pas. Je vais creuser de ce côté là car ce n’est pas logique…
Merci encore
prunune
28
Il y a des tas de façons de mettre une image en arrière plan, et la propriété peut très bien se trouver sur élément quelconque, par exemple sur un DIV englobant l’élément. Il faut bien regarder la structure du document, ce qui est facile avec Firebug.
Numerizen
1822
Oui, Firebug est en effet très bien conçu pour faciliter le theming.
J’ai finis par retrouver mon image et elle apparaît comme tu avais dis, le petit rond charge puis il est écrit : «failed to load given URL». Il y a donc bien un soucis de ce côté là.
Comme tu as du te rendre compte je suis plutôt novice en création de site, donc tout me prend pas mal de temps.
Je vais essayer ce que tu me conseille avec le DIV qui englobe l’élément.
Merci
prunune
28
Ouf, le problème est enfin réglé.
Je devais écrire le chemin comme ceci : background-image:url(«../images/logo2.jpg») ;
Merci à tous pour votre aide.
Juste une dernière petite question, la réponse m’a été donnée mais on ne m’a pas expliqué pourquoi mettre ../ avant le chemin.
Est ce que quelqu’un pourrait m’éclairer ?
prunune
28
Parce que votre CSS est dans un sous répertoire de même niveau que le répertoire «images».
Il vous faut donc indiquer un chemin relatif à la CSS.
/theme/images
/theme/css
Si vous indiquez url(images/logo2.jpg), l’image sera recherchée dans /theme/css/images qui n’existe pas.
Relativement à la CSS, le chemin ../images correspond en absolu à /theme/images. La notation «../», comme en UNIX, veut dire «répertoire parent».
Numerizen
1822
Merci tout est plus clair maintenant.
Je peux enfin essayer d’avancer un peu :)
prunune
28