Intégrer image sur CSS Résolu/Fermé

Question

Bonjour, je commence la programmation HTML/ CSS donc je ne m'y connais pas complètement. J'ai fait ma maquette de site sur photoshop. J'utilise maintenant NotePad++ pour le html et le css. J'ai réussi à faire mes premières lignes mais j'ai déjà un problème : Dans mon ficher css je veux mettre une image j'ai écrit cette ligne : background: url(../Images/header); dans le fichier css dans le #header {} (que j'appelle bien sur dans le fichier html en utilisant

Pour l'url de l'image j'ai écrit ça car en gros j'ai un dossier sur mon bureau. Dans le dossier il y a le fichier html, le fichier css et un dossier Images. Dans le dossier image, il y a l'image de mon header. J'ai de plus essayé de rajouter .jpg à la fin de l'url J'ai enregistré etc et quand je lance le lien html sur firefox ben y'a pas mon header. Y'a le texte etc mais pas l'image. Donc ma question est : qu'est ce que je dois faire pour que ça marche ? Si vous pouviez m'aider ça serait super gentil ! Merci d'avance :) Configuration: Windows / Firefox 36.0

-L0Lock- · Answer

Bonjour.
Deux problèmes dans ton code :
la syntaxe du css, ne pas oublier les guillemets :
background-image: ("mon-image.img");

Le lien de l'image :
Tu ne peux utiliser le "../" en CSS. Soit tu fais un lien absolu (qui contient le chemin du fichier depuis la racine), soit tu fais un lien relatif, mais tu ne peux pas remonter en amont du point de départ du lien.

animostab · Answer

salut
en fait pour que ce ne soit pas le bordel mets tous les fichier css dans un dossier (par exemple assets)
et fais
dans le head de la page si ce n'est pas déjà fait
<link href="assets/style.css" rel="stylesheet" type="text/css">
dans style.css
#header {
background:url (../Images/header.jpg);
}
pas besoin de de guillemets et ne pas oublier l'extention de ton fichier image (jpg, png, gif selon le cas)
pense aussi comme tu débute que tout nom de fichier / dossier ne doit contenir ni espace ni caractères spéciaux.
petite explication sur les chemins de fichiers (pour ma part j'utilise toujours les chemins relatifs)
https://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html

dernier truc : je te conseille d'utiliser brackets qui est bien mieux que notepad++ car brackets et un éditeur orienté web (en francais, nombreux plugin, color picker, auto complétion, etc) 
http://brackets.io
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

Intégrer image sur CSS

2 réponses

Discussions similaires