Intégrer image sur CSS

[Résolu/Fermé]
Signaler
-
Messages postés
5965
Date d'inscription
dimanche 10 février 2013
Statut
Membre
Dernière intervention
18 mars 2018
-
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 <div id="header">

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 :)


2 réponses

Messages postés
5965
Date d'inscription
dimanche 10 février 2013
Statut
Membre
Dernière intervention
18 mars 2018
1 137
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.

C'est quoi le chemin relatif ? :p
Messages postés
5965
Date d'inscription
dimanche 10 février 2013
Statut
Membre
Dernière intervention
18 mars 2018
1 137
A l'inverse d'un lien absolu, un lien relatif par de l'emplacement du fichier d'ou est fait l'appel (ici, ton fichier html).
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
687
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.
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
687
tu as ecris :et que le logo soit centré sur l'header. donc il est centré
padding marge interieure
margin : marge exterieure

bon remet un height a ton header puis

<div id ="header">
<div id="logo"></div><div id ="droite">contenu a droite</div>
</div>


#logo{
    float:left;
background: url("Images/logo-header.png") ; 
    width: 145px;
    height: 145px;
    margin : 8px 10px 20px 10%< /**a modifier selon ta convenance**/;
}

#droite {
    padding: 8px 0;
}


pour info un très bon site pour apprendre css
http://css.mammouthland.net/

voila tu peux mettre le sujet en résolu
Ok merci beaucoup
Messages postés
5965
Date d'inscription
dimanche 10 février 2013
Statut
Membre
Dernière intervention
18 mars 2018
1 137
Question tuto, il y a ceui-là qui te fais l'intégralité des bases à maîtriser en HTML et CSS.
Tu y trouveras notamment un chapitre sur le positionnement en CSS qui te sera bien utile.
Super merci beaucoup
Messages postés
5965
Date d'inscription
dimanche 10 février 2013
Statut
Membre
Dernière intervention
18 mars 2018
1 137
de-rien. :)