Afficher une image en background avec CSS

**plante20100** · 26/10/2007, 10h09

Bonjour à tous,

Voila je suis confronté à une incompréhension : je veux afficher une image en fond d'un div. Jusque là rien de bien sorcier. Après ca j'ai voulu traiter ce problème en inscrivant le style dans un fichier CSS. Et là je comprend pas pourquoi ca ne fonctionne pas. Le HTML trouve bien mon fichier CSS puisque j'ai une partie de la mise en page, mais mon image ne s'affiche pas. Ci dessous un exemple du code. Un premier div où j'inscrit directement mon style dans le HTML et un deuxième où j'utilise une classe CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style/style.css">
	</head>
	<body>
		<div style="width:1000px;height:100px;background-color:#cc0000; background-image:url(image/top_menu.gif); background-repeat: no-repeat">
			coucou
		</div>
 
		<div class="titre_menu" style="top:200px">
			re coucou
		</div>
	</body>
</html>

Et ma classe CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.titre_menu{
	width:1000px;
	height:100px;
	background-image: url(image/top_menu.gif);
	background-color:#cc0000;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position:relative;
	}

Ma config : Win XP, EasyPHP 1.8.0.1, Apache 1.3.33, Mozilla 2.0.0.8

Voila je suis plutot un débutant en dev web mais làje dois avouer que je comprend pas vraiment quel peut etre mon erreur. J'ai aussi tester ca avec IE et j'ai le même résultat...

Dites moi si vous voulez que je vous transmettes l'image, mais je pense que ca ne dépend du type d'image (j'ai essayé avec .png et .jpeg). Mais étant donné que l'image s'affiche bien une première fois je vois pas pourquoi ca ne marche à travers le CSS....

Merci par avance pour vos commentaires.

Vince

**spitou_77** · 26/10/2007, 10h18

Dans le CSS, modifier:
background-image: url(image/top_menu.gif);
en
background-image: url(../image/top_menu.gif);
ou bien mettre l'url complète
background-image: url(http:/monsite.com/image/top_menu.gif);

Le problème vient du fait que le fichier CSS n'est pas à la racine du site mais dans un sous-répertoire "style", et donc dans le chemin relatif il faut remonter d'un répertoire pour trouver le répertoire image.

**plante20100** · 29/10/2007, 17h16

OK shame on me... mea culpa et tout tralala.

En tout cas merci je commencais à plus avoir de cheveux à m'arracher...

Merci

Afficher une image en background avec CSS

CSS

Discussions similaires

Partager

Partager