18041 sujets

Questions générales et questions de débutants

Problème affichage image background. [RESOLU]

Bonjour !

Voilà, j'ai un problème pour afficher une image en background.
J'ai tout essayé en cherchant pendant 2h sur internet mais pas moyen.

Je vais mettre mon code HTML suivi du CSS:

===========
HTML
===========
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Présentation</title>

    <link rel="stylesheet" type="text/css" media="screen" href="index.css" />
</head>
<body>
<h1>Présentation</h1>

<ul>
	<li>Présentation</li>
	<li>Truc</li>
	<li>Machin</li>
</ul>

<p>Petite présentation</p>

<!-- Document -->

</body>
</html>


========
CSS
========

body{

	
	margin 0;
	padding 10px;
	background:url(images/butterfly.gif);
}





J'ai essayé de mettre le texte en rouge et ca fonctionne.
Pour la syntaxe j'ai essayé background-image, avec des apostrophes, avec des espaces, sans espaces....
J'ai aussi essayé de changer d'image, de mettre le nom de l'emplacement complet etc etc.
Aucun navigateur ne me sort l'image
Modifié par geopl (26 Jan 2010 - 15:29)
Hello,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne
Ma page n'est pas en ligne. J'ai juste un problème d'image. Le texte s'affiche correctement, je peux changer la couleur en CSS mais l'image ne s'affiche pas Smiley ohwell

Je vais mettre une capture d' écran :

upload/26120-Sanstitre.jpg
Modifié par geopl (26 Jan 2010 - 13:10)
A priori si l'image ne s'affiche pas c'est que le chemin n'est pas bon... et sans page en ligne c'est impossible de te dire pourquoi. Smiley murf


Edit:

dit autrement et en supposant que ta page html se nomme index.htm tu devrais avoir à la racine :
* index.htm
* index.css
* répertoire images contenant butterfly.gif

Est-ce bien le cas ?


Edit2: j'allais te dire que nous avions bien compris le problème et que ta capture d' écran était inutile mais comme ça permet de voir que tu as web developper : tu n'aurais pas désactivé les images par hasard ? Smiley murf
Modifié par Heyoan (26 Jan 2010 - 13:17)
J'ai un dossier style avec le fichier CSS et un autre dossier images. Dans ce dossier images j'ai l'image à inserer.
geopl a écrit :
J'ai un dossier style avec le fichier CSS et un autre dossier images. Dans ce dossier images j'ai l'image à inserer.

Alors :

1) l'attribut href de ton élément LINK est erronné : ce n'est pas href="index.css" mais href="style/index.css"

2) le chemin d'une image en background css utilise comme référence l'emplacement de la feuille de style donc ce n'est pas url(images/butterfly.gif); mais url(../images/butterfly.gif); ou en utilisant le chemin absolu url(/images/butterfly.gif);
Modifié par Heyoan (26 Jan 2010 - 13:22)
Dans ce cas, le problème est bien une question de chemin.

L'url de l'image doit être donnée par rapport au fichier CSS, donc : ../images/butterfly.gif

Edit: Je m'améliore, 13 secondes de retard seulement
Modifié par Laurie-Anne (26 Jan 2010 - 13:22)
Laurie-Anne a écrit :
Edit: Je m'améliore, 13 secondes de retard seulement
Encore 2 ou 3 tentatives et c'est moi qui serai en retard ! Smiley ravi
Je me suis posé la même question et c'est pourquoi j'ai changé mon fichier CSS pour le mettre dans le même dossier que le HTML. Mais non... toujours pas d'image.
J'ai aussi essayé comme ça " .../images/butterfly.gif mais non !
J'ai essayé avec google chrome et IE mais ça ne change rien.
J'ai aussi essayé de l'insérer directement dans le HTML avec cette balise :

<img src="" /> mais ça ne fonctionne pas non plus.
Modifié par geopl (26 Jan 2010 - 13:37)
2 dernières suggestions :
* essayer avec une autre image des fois que butterfly.gif serait corrompue.
* vérifier que le fichier css n'a pas été enregistré en utf8 avec BOM.
geopl a écrit :
J'ai essayé avec google chrome et IE mais ça ne change rien.
J'ai aussi essayé de l'insérer directement dans le HTML avec cette balise :
<img src="" /> mais ça ne fonctionne pas non plus.

Il va être difficile de te venir en aide en multipliant les supputations hasardeuses, alors qu'une page en ligne devrait nous permettre plus aisément de constater par nous même où se situe le problème, et de t'apporter une aide éventuelle, mieux ciblée et plus constructive Smiley cligne

Cela devrait te prendre 2 min à faire, et sans doute quelques minutes pour résoudre le soucis...pour le moment, nous tournons en rond depuis plus d'une heure... Smiley hmm
Modifié par 6l20 (26 Jan 2010 - 14:03)
J'ai essayé avec plusieurs images mais ça ne change rien.

C' était en UT8 alors j'ai recrée un nouveau fichier avec un encodage par défaut ANSI. Mais ça ne marche toujours pas !
Je sais qu'on tourne en rond depuis une heure et j'ai ma tête qui va exploser tellement je réfléchis à ce que ça peut être et d'ailleurs je vous remercie de votre patience.

Mais j'ai jamais mis une page en ligne et je connais pas la marche à suivre ...
Si vraiment ça prend 2 minutes vous n' avez qu'à me dire comment on fait ^^ Smiley ohwell
Bon ben en fait ça a l'air de marcher !

La première image je ne sais pas pourquoi elle marche pas. Peut-être parcequ' il y' a déjà une image qui porte le même nom dans un autre dossier..
Sinon une autre image que j'avais essayé et qui n'avait pas fonctionné était un fond d' écran que j'avais fait sur photoshop. J'ai ré-enregistré l'image pour le web et cette fois elle s'est affiché.

Donc voilà ! Merci d'avoir essayé de m'aider !
Sujet clos
Aller à