Insertion d'une image dans CSS - création d'un sous-dossier [Fermé]
Signaler
xueven
xueven
- Messages postés
- 6
- Date d'inscription
- mercredi 6 février 2013
- Statut
- Membre
- Dernière intervention
- 6 février 2013
xueven
- Messages postés
- 6
- Date d'inscription
- mercredi 6 février 2013
- Statut
- Membre
- Dernière intervention
- 6 février 2013
A voir également:
- Inserer image css
- Insérer une image css - Meilleures réponses
- Placer une image en css - Meilleures réponses
- Insertion d'une image dans CSS - création d'un sous-dossier - Forum - CSS
- Code HTML pour inserer une image de fond ✓ - Forum - HTML
- Débutant wordpress - insérer image dans style.css ou header.php? - Forum - Wordpress
- Insérer image dans pdf ✓ - Forum - Graphisme
- Déplacer une image css - Articles
11 réponses
inspiring
- Messages postés
- 1811
- Date d'inscription
- vendredi 28 janvier 2011
- Statut
- Membre
- Dernière intervention
- 31 décembre 2018
L'image que je souhaite importer est sur mon bureau
argghhhh ! lol !
il ne faut raisonner en se disant qu'on veux importer l'image mais qu'on va chercher l'image.
Effectivement il faut tu crée un dossier qui contient ton projet de site avec dedans les dossiers classique du type CSS, JS, Images, ... (tu les nommes comme tu veux). Ca facilitera l'écriture des chemins de fichiers et le dossier que tu Uploadera ensuite sur le serveur sera pret (parce que si y'a des morceau un peu partout dans ton PC ca va etre coton).
disons que ta page soit dans le dossier racine, ta feuille css dans le dossier CSS et ton image "monfond.jpg" dans le dossier images, dans ce cas ca te donnera :
background:url("../images/monfond.jpg");
argghhhh ! lol !
il ne faut raisonner en se disant qu'on veux importer l'image mais qu'on va chercher l'image.
Effectivement il faut tu crée un dossier qui contient ton projet de site avec dedans les dossiers classique du type CSS, JS, Images, ... (tu les nommes comme tu veux). Ca facilitera l'écriture des chemins de fichiers et le dossier que tu Uploadera ensuite sur le serveur sera pret (parce que si y'a des morceau un peu partout dans ton PC ca va etre coton).
disons que ta page soit dans le dossier racine, ta feuille css dans le dossier CSS et ton image "monfond.jpg" dans le dossier images, dans ce cas ca te donnera :
background:url("../images/monfond.jpg");
inspiring
- Messages postés
- 1811
- Date d'inscription
- vendredi 28 janvier 2011
- Statut
- Membre
- Dernière intervention
- 31 décembre 2018
Bon, je t'indique la demarche en partant de zero, garde les meme noms de dossiers ou renomme les mais en n'oubliant pas de reporter ces modifs dans le chemins d'appel :
ETAPE 1
1- Crée un dossier appelé "monsiteweb", puis ouvre le
2- dedans crée un dossiers nommé "CSS", un dossier nommé "Images"
3- dans le dossier "CSS", met y ta feuille de style, nommé pour l'exemple "monstyle.css"
4- dans le dossiers "images", tu y met ton image de fond, nommé pour l'exemple "monfond.jpg" (.jpg est l'extention, tu as peut etre un .png)
5- dans le dossier "monsiteweb", tu place ta page web, nommée pour l'exemple "mapage.html"
ETAPE 2
6- dans le fichier "monstyle.css", tu code
body {background: url('../images/monfond.jpg');}
tu sauvegarde et ferme
7- dans le fichier "mapage.html", tu insères cette ligne de code dans le <head> de la page
<link rel="stylesheet" media="screen" type="text/css" href="monstyle.css">
tu sauvegarde et tu ferme (ou pas)
Et là ton image devrait apparaitre quand tu visualiseras "mapage.html" dans ton navigateur
ETAPE 1
1- Crée un dossier appelé "monsiteweb", puis ouvre le
2- dedans crée un dossiers nommé "CSS", un dossier nommé "Images"
3- dans le dossier "CSS", met y ta feuille de style, nommé pour l'exemple "monstyle.css"
4- dans le dossiers "images", tu y met ton image de fond, nommé pour l'exemple "monfond.jpg" (.jpg est l'extention, tu as peut etre un .png)
5- dans le dossier "monsiteweb", tu place ta page web, nommée pour l'exemple "mapage.html"
ETAPE 2
6- dans le fichier "monstyle.css", tu code
body {background: url('../images/monfond.jpg');}
tu sauvegarde et ferme
7- dans le fichier "mapage.html", tu insères cette ligne de code dans le <head> de la page
<link rel="stylesheet" media="screen" type="text/css" href="monstyle.css">
tu sauvegarde et tu ferme (ou pas)
Et là ton image devrait apparaitre quand tu visualiseras "mapage.html" dans ton navigateur
inspiring
- Messages postés
- 1811
- Date d'inscription
- vendredi 28 janvier 2011
- Statut
- Membre
- Dernière intervention
- 31 décembre 2018
il y a plusieurs methode d'insérer le CSS, il faudrait que tu nous précise si tes règles sont sur une feuille externe, dans le head ou dans le code.
Précisez aussi si l'image de fond est pour la page ou un élément (lequel ...)
Précisez aussi si l'image de fond est pour la page ou un élément (lequel ...)
xueven
- Messages postés
- 6
- Date d'inscription
- mercredi 6 février 2013
- Statut
- Membre
- Dernière intervention
- 6 février 2013
Merci pour vos réponses aussi rapides.
1 - J'utilise notepad++
2 - J'ai créé une feuille HTML
3 - j'y ai associé une feuille CSS
Jusque là tout est OK (police, couleur de fond).
J'ai beau utilisé url("image.jpg"); rien n'y fait. J'ai essayé avec ou sans les (), "",
L'image que je souhaite importer est sur mon bureau
J'ai entendu dire qu'il était préférable de la mettre dans un sous-dossier de ma feuille CSS mais je ne sais comment procéder. Quand je vous dis que je suis une nullarde!!!!!
1 - J'utilise notepad++
2 - J'ai créé une feuille HTML
3 - j'y ai associé une feuille CSS
Jusque là tout est OK (police, couleur de fond).
J'ai beau utilisé url("image.jpg"); rien n'y fait. J'ai essayé avec ou sans les (), "",
L'image que je souhaite importer est sur mon bureau
J'ai entendu dire qu'il était préférable de la mettre dans un sous-dossier de ma feuille CSS mais je ne sais comment procéder. Quand je vous dis que je suis une nullarde!!!!!
xueven
- Messages postés
- 6
- Date d'inscription
- mercredi 6 février 2013
- Statut
- Membre
- Dernière intervention
- 6 février 2013
Salut Inspiring,
Trop gentil de ta part de vouloir t'occuper de moi mais imagine-toi être un instit au CP face à une gamine à qui tu dois apprendre à lire et à écrire. Voilà j'en suis là...
Enfin presque. J'ai réussi à créer le dossier CSS mais ne sais pas faire pour les images. Peux-tu m'orienter STP ?
Trop gentil de ta part de vouloir t'occuper de moi mais imagine-toi être un instit au CP face à une gamine à qui tu dois apprendre à lire et à écrire. Voilà j'en suis là...
Enfin presque. J'ai réussi à créer le dossier CSS mais ne sais pas faire pour les images. Peux-tu m'orienter STP ?
inspiring
- Messages postés
- 1811
- Date d'inscription
- vendredi 28 janvier 2011
- Statut
- Membre
- Dernière intervention
- 31 décembre 2018
je ne cerne pas trop ta demande
est-ce comment créer le dossier image ? (comme un dossier classique puis on y met ces images)
quand tu defini le fond que tu veux attribuer à ton élément, le fait tu en attribuant la règle à un element, un id ou une class ?
attribue tu correctement le selecteur à cet element ?
est-ce que je viens de demander est du chinois pour toi :))))) ?
est-ce comment créer le dossier image ? (comme un dossier classique puis on y met ces images)
quand tu defini le fond que tu veux attribuer à ton élément, le fait tu en attribuant la règle à un element, un id ou une class ?
attribue tu correctement le selecteur à cet element ?
est-ce que je viens de demander est du chinois pour toi :))))) ?
Pierrecastor
- Messages postés
- 37688
- Date d'inscription
- mercredi 5 novembre 2003
- Statut
- Modérateur
- Dernière intervention
- 15 janvier 2021
Salut
Je pense qu'il faut commencer par la base, ceci pourra t'être utile :
https://openclassrooms.com/fr/courses
Je pense qu'il faut commencer par la base, ceci pourra t'être utile :
https://openclassrooms.com/fr/courses
xueven
- Messages postés
- 6
- Date d'inscription
- mercredi 6 février 2013
- Statut
- Membre
- Dernière intervention
- 6 février 2013
Merci Pierrecastor,
C'est précisemment par ce site que j'ai commencé mais je n'arrive pas à aller chercher l'image;
C'est précisemment par ce site que j'ai commencé mais je n'arrive pas à aller chercher l'image;
xueven
- Messages postés
- 6
- Date d'inscription
- mercredi 6 février 2013
- Statut
- Membre
- Dernière intervention
- 6 février 2013
Cher Inspiring,
Tu as tout compris c'est à peu près ca, du chinois. Ok je créé une troisième page à coté de HTML et CSS, j'y emmène l'image mais j'opte pour quel langage dans cette page ?
Tu as tout compris c'est à peu près ca, du chinois. Ok je créé une troisième page à coté de HTML et CSS, j'y emmène l'image mais j'opte pour quel langage dans cette page ?
Pierrecastor
- Messages postés
- 37688
- Date d'inscription
- mercredi 5 novembre 2003
- Statut
- Modérateur
- Dernière intervention
- 15 janvier 2021
Non non, pas besoin de nouvelle page.
Ton site est bien ranger dans un répertoire ? Qui contiens les différents fichiers et dossier du site ?
Dans ce répertoire, tu doit avoir ta feuille HTML (de préférence appelé index.html), un sous dossier ou tu rangera tes fichiers CSS et un sous répertoire ou tu mettra tes images.
Si tu appelle ce sous répertoire images, le lien vers ton image sera donc :
url("images/image.jpg")
Tu devrait lire ça pour les liens :
https://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html
Ton site est bien ranger dans un répertoire ? Qui contiens les différents fichiers et dossier du site ?
Dans ce répertoire, tu doit avoir ta feuille HTML (de préférence appelé index.html), un sous dossier ou tu rangera tes fichiers CSS et un sous répertoire ou tu mettra tes images.
Si tu appelle ce sous répertoire images, le lien vers ton image sera donc :
url("images/image.jpg")
Tu devrait lire ça pour les liens :
https://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html
xueven
- Messages postés
- 6
- Date d'inscription
- mercredi 6 février 2013
- Statut
- Membre
- Dernière intervention
- 6 février 2013
Je suis vraiment désolée de vous avoir squatté tant de votre précieux temps mais je n'y arrive pas.
Je vais donc laisser tomber l'idée de mettre une image de fond.
J'ai au moins une couleur.
Encore merci du temps passé pour vos explications.
Je vais donc laisser tomber l'idée de mettre une image de fond.
J'ai au moins une couleur.
Encore merci du temps passé pour vos explications.
