Les Allergies
Alimentaires
Posez votre question Signaler

Background-images ne fonctionne pas [Résolu]

Odélie 2Messages postés 7 août 2007Date d'inscription - Dernière réponse le 26 févr. 2009 à 16:14
Bonjour
Je suis en train de créer un site (mais il n'est pas encore en ligne) avec notepad ++
Le code a l'air de bien fonctionner sauf ce qui devrait être le plus simple : l'image d'arrière plan.
Voilà mon code sur ma feuille css

body
{
	width: 80%;
	margin-left: auto;
	margin-right: auto;	
	background-color: white;
	background-image: url(/images/themecss/ap1.gif);	
	background-repeat : no repeat;
	font-family: Verdana, "Times New Roman", sans-serif;

}

Pourquoi, cela ne fonctionne pas en sachant que le reste du code css de la feuille fonctionne (donc elle est bien rattachée), que l'image ap1.gif fait moins de 15 ko et que j'ai vérifié 100x l'adresse de mon image ??
Merci d'avance pour vos astuces !
Lire la suite 

Background-images ne fonctionne pas »

9 réponses
Réponse
+1
moins plus
background-image: url(/images/themecss/ap1.gif);

---------> background-image: url( 'images/themecss/ap1.gif' );

Vu que ça ne se voit pas trop faut des ' et pas le / devant images
Dalida- 8 août 2007 à 10:54
salut,

+1
et je me permettrai d'ajouter que si cela ne fonctionne pas ainsi c'est surement que ton adresse relative est inexacte.
dans ce cas essaie avec :
background-image: url( '../images/themecss/ap1.gif' );
Ajouter un commentaire
Réponse
+0
moins plus
Bonjour je me nome ReDark, selon ton probleme ses juste le background qui ne marche as donc recapitulon tu veut une image d'arriere plan (je supose que si ton ariere plan marche aps il ets blanc) retire :


background-color: white;

peut etre que selui si bloc limage et sinon je te donne un exemple :
jai 3 fichier :

1er
2eme
3eme

si tu met le dosier en NOTEPAD dans le 1er il faut que l'image face 2eme/3eme/img.gif
n'oublie pas que pour le metre en ligne il faut que tu le mete en HTML ou PHP si ton probleme ne se resolue pas join moi pas redark@hotmail.fr je te passerai ma feuille de style je la modifierais a ta façon
Dalida- 8 août 2007 à 10:56
enchanté ReDark,

c'est un problème ou une solution ?
-;o)
Ajouter un commentaire
Réponse
+0
moins plus
Salut.

Les guillemets/apostrophes autour d'une adresse CSS ne sont pas obligatoires, ils sont même déconseillés/ : ils font planter certains navigateurs (je ne me rappelle plus lesquels, regardes es sites spécialisés pour ça).

Ensuite, si ça ne marche pas, c'est effectivement parce que tu as mis une adresse absolue au lieu de relative.
Ca m'étonnerait que tu as un dossier /image à la racine de ton disque (surtout si tu es sous Windows :-p).

Mais il vaut mieux faire comme ça pour le site, surtout si ton fichier CSS est appellé à partir de plusieurs dossiers/sous-dossiers.

Tu n'as qu'a laisser comme ça et vérifier sur internet une fois ton site mis en ligne.

Tu peux aussi utiliser un serveur web local, mais là c'est vraiment une perte de temps pou un si petit problème.

a plus
Dalida- 8 août 2007 à 20:43
-1

tu as mis une adresse absolue au lieu de relative
bah non !

adresse absolue :
http://www.ccmmonamour.net/dossier/page.html

adresse relative :
dossier/page.html

Ca m'étonnerait que tu as un dossier /image à la racine de ton disque (surtout si tu es sous Windows :-p)
l'adresse est relative à la racine du serveur web pas du disque.

et pour les guillemets simple ou double, ils sont optionnels.
le seul problème d'incompatibilité que je connaisse c'est avec IE/Mac qui a été abandonné par Microsoft depuis belle lurette et qui ne représente plus rien.

par contre j'ai souvent lu qu'il pouvaient être enlevés dans le but d'alléger au maximum la feuille de style. mais à ce niveau là, c'est pas la même histoire…
Ajouter un commentaire
Réponse
+0
moins plus
Salut !

Vous avez vu juste, le problème venait de mon adresse (absolue au lieu d'être relative). En fait je ne savais pas qu'il en existait 2 types.

j'ai enlevé
background-color: white;

et j'ai mis le code de Dalida :
background-image: url( '../images/themecss/ap1.gif' );
Mais sous les conseils de Sylvainsab, j'ai enlevé les guillemets.

ça donne :

body
{
	width: 80%;
	margin-left: auto;
	margin-right: auto;	
	background-image: url( ../images/themecss/ap1.gif );	
	background-repeat: no-repeat;
	font-family: Verdana, "Times New Roman", sans-serif;

}


et ça fonctionne parfaitement
Merci !!
marvy2008 - 16 oct. 2008 à 12:37
Suer j'avais un problème du genre l'image aparéser pas avec

(styles/animroyococlili.gif)

sa a marcher dé que j'ai rajouter ../ devant comme ça

(../styles/animroyococlili.gif)

cool marci
Ajouter un commentaire
Réponse
+0
moins plus
Il faut laisser les apastrophes dans l'url, car si le nom de le chemin contient des espaces, le chemin ne sera pas
trouvé par le nav
Ajouter un commentaire
Ce document intitulé « background-images ne fonctionne pas » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?