Aide CSS
Résolu
-rochdi-
Messages postés
934
Date d'inscription
Statut
Membre
Dernière intervention
-
-rochdi- Messages postés 934 Date d'inscription Statut Membre Dernière intervention -
-rochdi- Messages postés 934 Date d'inscription Statut Membre Dernière intervention -
Bonjour,je veux créer un site WEB,bien sur je suis des cours de XHTML et CSS, c'est là le problème,
pour mettre une image en fond d'écran du site je crois que c'est
body
{
background-image: url("../project/skull.JPEG");
}
sauf qu'on ouvrant mon browser(Google chrome) elle n'est pas affichée.
Merci d'avance!
pour mettre une image en fond d'écran du site je crois que c'est
body
{
background-image: url("../project/skull.JPEG");
}
sauf qu'on ouvrant mon browser(Google chrome) elle n'est pas affichée.
Merci d'avance!
A voir également:
- Aide CSS
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
50 réponses
Faut pas mettre de chemin absolu. Jamais.
retente celà :
body
{
background-image: url(skull.JPG) no-repeat;
}
mais avec "background" (sans le "image")
et éssayes en ligne (au moins le "body {"
je doute que ce dernier point change mais tentes ;-)
retente celà :
body
{
background-image: url(skull.JPG) no-repeat;
}
mais avec "background" (sans le "image")
et éssayes en ligne (au moins le "body {"
je doute que ce dernier point change mais tentes ;-)
Page web introuvable
donc…
• soit ton fichier image n'est placé au même endroit que ta page HTML (ou CSS si fichier CSS à part), comme je te disais plus haut ;
• soit le fichier image n'est pas nommé comme il faut, cf. l'intervention du hollandais volant.
donc…
• soit ton fichier image n'est placé au même endroit que ta page HTML (ou CSS si fichier CSS à part), comme je te disais plus haut ;
• soit le fichier image n'est pas nommé comme il faut, cf. l'intervention du hollandais volant.
En fait dans le même dossier y'a le fichier html le fichier CSS et l'image et je l'ai renommé moi même skull pour m'assurer
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bien sur,le fichier html c'est:
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Page d'exemple pour tester le CSS</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
</head>
<body>
<h1>Découverte du CSS</h1>
<p>
Bonjour !<br/>
Je suis une page XHTML<em>apparemment</em>banale, mais je sers en fait de test de fichiers<acronym title="Cascading Style Sheets">CSS</acronym>pour les tutoriels du<a href="https://openclassrooms.com/fr/">Site du zéro</a>
</p>
<h2>Ce n'est que du blabla</h2>
<p>
Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q>C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
J'aime la choucroute en conserve.<br />
Vive les frites !
</p>
<p>
Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
</p>
</body>
</html>
et le fichier CSS est
body {background-image: url(skull.JPG) no-repeat;}
merci
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Page d'exemple pour tester le CSS</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
</head>
<body>
<h1>Découverte du CSS</h1>
<p>
Bonjour !<br/>
Je suis une page XHTML<em>apparemment</em>banale, mais je sers en fait de test de fichiers<acronym title="Cascading Style Sheets">CSS</acronym>pour les tutoriels du<a href="https://openclassrooms.com/fr/">Site du zéro</a>
</p>
<h2>Ce n'est que du blabla</h2>
<p>
Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q>C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
J'aime la choucroute en conserve.<br />
Vive les frites !
</p>
<p>
Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
</p>
</body>
</html>
et le fichier CSS est
body {background-image: url(skull.JPG) no-repeat;}
merci
Regardes ce que j'ai dans mon fichier CSS de mon site :
#ubuntu { background: #000030 url('index/Ubuntu.png') no-repeat 1px 4px;}
La couleur de fond sera légèrement bleu, le fichier sera Ubuntu.png (notes la majuscule qui est aussi là dans le nom du fichier. Sinon çane marches pas.
No repeat, c'est pour n'afficher le fichier qu'une fois. les 1px 4px, c'est pour un décallage (toi tu ne dois pas en avoir besoin.
Aussi, est-ce que "Body" peut avoir un "background"? Éssayes avec avec un <div> qui fait toute la feuille^^
#ubuntu { background: #000030 url('index/Ubuntu.png') no-repeat 1px 4px;}
La couleur de fond sera légèrement bleu, le fichier sera Ubuntu.png (notes la majuscule qui est aussi là dans le nom du fichier. Sinon çane marches pas.
No repeat, c'est pour n'afficher le fichier qu'une fois. les 1px 4px, c'est pour un décallage (toi tu ne dois pas en avoir besoin.
Aussi, est-ce que "Body" peut avoir un "background"? Éssayes avec avec un <div> qui fait toute la feuille^^
Tout ce que je sais sur <div> c'est qu'elle est une balise block je crois, je ne connais toujours pas peux-tu me dire ou la mettre?merci
<link rel="stylesheet" type="text/css" href="index.css" /> ← ce que je met.
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
Euh, c'est quoi ces atributs : "title" dans les CSS???
J'ai jamais vu ça^^
Et le "media screen" n'est pas indispensable non plus^^
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
Euh, c'est quoi ces atributs : "title" dans les CSS???
J'ai jamais vu ça^^
Et le "media screen" n'est pas indispensable non plus^^
ah c'est bon ,je viens de télécharger Nvu et j'ai vu la source je devais mettre des guillemets,enfin ça a donné ça
body {background: url("file:///C:/Documents%20and%20Settings/khalikine/Bureau/rochdi/project/skull.jpg") ;}
reste un seul souci l'image est affiché en mosaïque,comment faire pour l'afficher correctement?
body {background: url("file:///C:/Documents%20and%20Settings/khalikine/Bureau/rochdi/project/skull.jpg") ;}
reste un seul souci l'image est affiché en mosaïque,comment faire pour l'afficher correctement?
Ok. Tu vois que les miniscules sont bien respectés là^^
Moi j'ai pas besoin de guillemets.
Aussi, mettre un chemin Absolu est très mauvais!!! Sur ton futur serveur internet, il n'y auras pas de "C:\". Ce sera un serveur probablement linux.
Il faut mettre les chemins relatifs. Toujours. Prend en l'habitude.
body {background: url("skull.jpg") ;}
Pour ne pas le répeter :
body {background: url("skull.jpg") no-repeat ;}
Ensuite, éssayes sans les guillemets… ça sert à rien. Perso, je teste avec les " ou les ' ou rien, aucune différence. ça marche (sous Chrome, opera, firefox, IE…
Moi j'ai pas besoin de guillemets.
Aussi, mettre un chemin Absolu est très mauvais!!! Sur ton futur serveur internet, il n'y auras pas de "C:\". Ce sera un serveur probablement linux.
Il faut mettre les chemins relatifs. Toujours. Prend en l'habitude.
body {background: url("skull.jpg") ;}
Pour ne pas le répeter :
body {background: url("skull.jpg") no-repeat ;}
Ensuite, éssayes sans les guillemets… ça sert à rien. Perso, je teste avec les " ou les ' ou rien, aucune différence. ça marche (sous Chrome, opera, firefox, IE…
Je viens de tester même avec body.
Aucun souci.
Je crois que cela vient des noms des fichiers. Il faut respecter majuscules et minuscules et espaces très précisément.
Aussi, l'extension serait mieux en minuscule partout (fichier et dans le CSS).
Je viens de tester avec une image jpg, gif, ou png : ça marche tout.
Aucun souci.
Je crois que cela vient des noms des fichiers. Il faut respecter majuscules et minuscules et espaces très précisément.
Aussi, l'extension serait mieux en minuscule partout (fichier et dans le CSS).
Je viens de tester avec une image jpg, gif, ou png : ça marche tout.
Merci tout le monde encore, et juste une dernière chose le chemin affiché sur la barre c'est
C:\Documents and Settings\khalikine\Bureau\rochdi\project
alors que dans le fichier CSS je devais mettre
file:///C:/Documents%20and%20Settings/khalikine/Bureau/rochdi/project/skull.jpg
comment savoir quel chemin mettre?
Encore merci tout le monde,merci le hollandais volant^^
C:\Documents and Settings\khalikine\Bureau\rochdi\project
alors que dans le fichier CSS je devais mettre
file:///C:/Documents%20and%20Settings/khalikine/Bureau/rochdi/project/skull.jpg
comment savoir quel chemin mettre?
Encore merci tout le monde,merci le hollandais volant^^
CF poste 33.
Utilises les chemins RELATIFS.
Placers les fichiers les un par rapport aux autres. Pour prendre une image se trouvant dans le même dossier, tu met juste url(image.ext)
pour l'image se trouvant dans un dossier parent : url(../image.ext)
Pour une image dans un dossier 'index' du dossier parent : url(../index/image.ext)
Pour une image dans un dossier 3 niveau au dessus : url(../../../image.ext)
etc.
Utilises les chemins RELATIFS.
Placers les fichiers les un par rapport aux autres. Pour prendre une image se trouvant dans le même dossier, tu met juste url(image.ext)
pour l'image se trouvant dans un dossier parent : url(../image.ext)
Pour une image dans un dossier 'index' du dossier parent : url(../index/image.ext)
Pour une image dans un dossier 3 niveau au dessus : url(../../../image.ext)
etc.
Ok, merci beaucoup, mais là elle ne prend que les 3/4 de l'arrière-plan comment faire pour qu'elle couvre le tout?
Ok. Ça marche sans les guillemets? Et le chemin relatif?
Sinon, ça ça dépend de l'image. Souvent on utilise une image en forme d'une fine bande verticale puis on le répète sur toute la page.
Tu peux mettre :
cela centrera l'image. Mais je sait pas si on peut mettre "justify" ou "stretch" pour l'étirer (???).
Le mieux serait de prendre une grande image, la centrer. Car ainsi, cela ne gênerais pas les écrans avec une petite résolution (genre les netbook, qui sont très en vogue. ou pire : les iPhones ou dans ce genre.).
De nos jours, tout cela est à prendre en compte. Aussi, l'image ne soit pas faire 2Mio. Au plus 100Kio. Grand maximum.
comme il est au format Jpeg, tu peux choisir la qualité. En générale, entre 100% et 40%, il n'y a aucune différence de qualité visible. Alors que la taille peut être divisée par 10.
Penses-y.
Au final, on se retrouve avec une lourde équation avec des dizaines de paramètres, mais on y arrive!
Sinon, ça ça dépend de l'image. Souvent on utilise une image en forme d'une fine bande verticale puis on le répète sur toute la page.
Tu peux mettre :
body {background: url("skull.jpg") no-repeat center ; }
cela centrera l'image. Mais je sait pas si on peut mettre "justify" ou "stretch" pour l'étirer (???).
Le mieux serait de prendre une grande image, la centrer. Car ainsi, cela ne gênerais pas les écrans avec une petite résolution (genre les netbook, qui sont très en vogue. ou pire : les iPhones ou dans ce genre.).
De nos jours, tout cela est à prendre en compte. Aussi, l'image ne soit pas faire 2Mio. Au plus 100Kio. Grand maximum.
comme il est au format Jpeg, tu peux choisir la qualité. En générale, entre 100% et 40%, il n'y a aucune différence de qualité visible. Alors que la taille peut être divisée par 10.
Penses-y.
Au final, on se retrouve avec une lourde équation avec des dizaines de paramètres, mais on y arrive!
oui.
par exemple si tu as dans le HTML :
<div class="un">
<div class="deux">
<div class="trois">
bla bla
</div>
<table class="deux">
…
…
</table>
</div>
</div>
dans le CSS, tout ce qui est en ".deux" sera appliqué à ce qui aura "class="deux"" que ce soit div, table ou autre.
si tu veux faire un objet unique avec "header", on utilise id="deux" (dans le CSS : #deux), mais là, un seul objet peut avoir ce ID.
par exemple si tu as dans le HTML :
<div class="un">
<div class="deux">
<div class="trois">
bla bla
</div>
<table class="deux">
…
…
</table>
</div>
</div>
dans le CSS, tout ce qui est en ".deux" sera appliqué à ce qui aura "class="deux"" que ce soit div, table ou autre.
si tu veux faire un objet unique avec "header", on utilise id="deux" (dans le CSS : #deux), mais là, un seul objet peut avoir ce ID.
voici quelques astuces :
si tu as un div avec 2 table dedans (un table class "un" et un table class "deux").
tu fera en CSS :
mais, si tu veux applique certains attributs (le même) aux deux tableaux, tu peux faire :
soit les répéter dans chacune des lignes du CSS (c'est mal, lourd est pas bien)
soit faire :
cela appliquera aux class "un" et "deux" à la fois. Ceci est d'une praticité extrême. Si tu regardes vers la fin de mon fichier styles de mon site LÀ, tu verra.
Ensuite, imagine que tu ais un div class="six" avec un table et dedans un autre div, puis un autre div.
Si tu veux appliquer un CSS à div à l'intérieur, soit tu lui donnes un "class" particulier, soit :
Ainsi, tous les div dans les objets de class "six" aurant les couleurs, formes définis par le CSS. (que ce soit le premier "sous div" ou le second "sous div"
Si tu veux appliquer au premier sous div :
Celà appliquera uniquement au premier sous div.
par contre :
N'appliquent que au second sous div.
notes que si tu as plusieurs "class="six"", la second appliquera les styles à tous les div de rang deux de tous les div de class "six", alors que le premier n'appliquera les styles que aux div de rang 2 dans les "table" d'un div de class="six"…
Si tu veux apprendre d'autres choses, je t'invite à explorer mon fichier "index.css". Y'a à peu prés de tout.
si tu as un div avec 2 table dedans (un table class "un" et un table class "deux").
tu fera en CSS :
.un {……}
.deux {……}
mais, si tu veux applique certains attributs (le même) aux deux tableaux, tu peux faire :
soit les répéter dans chacune des lignes du CSS (c'est mal, lourd est pas bien)
soit faire :
.un, .deux {………}(séparation des noms par une virgule puis un espace pour signifier que l'on appliquer les attributs au deux classes.)
cela appliquera aux class "un" et "deux" à la fois. Ceci est d'une praticité extrême. Si tu regardes vers la fin de mon fichier styles de mon site LÀ, tu verra.
Ensuite, imagine que tu ais un div class="six" avec un table et dedans un autre div, puis un autre div.
Si tu veux appliquer un CSS à div à l'intérieur, soit tu lui donnes un "class" particulier, soit :
.six div {……}(séparation par un espace, pour indiquer que l'on prend tous les "div" dans ce div (fils, petit-fils, etc)
Ainsi, tous les div dans les objets de class "six" aurant les couleurs, formes définis par le CSS. (que ce soit le premier "sous div" ou le second "sous div"
Si tu veux appliquer au premier sous div :
.six > table > div {……} (un ">" pour signifier que l'on ne prend que les div "fils" pas "petit-fils" (évidement, ici c'est de manière récursive))
Celà appliquera uniquement au premier sous div.
par contre :
.six > table > div > div {……}ou.six div > div {……} (ici on combine les 2 pour aller où l'on souhaite.)
N'appliquent que au second sous div.
notes que si tu as plusieurs "class="six"", la second appliquera les styles à tous les div de rang deux de tous les div de class "six", alors que le premier n'appliquera les styles que aux div de rang 2 dans les "table" d'un div de class="six"…
Si tu veux apprendre d'autres choses, je t'invite à explorer mon fichier "index.css". Y'a à peu prés de tout.
