Mettre une image en CSS

J'aurai besoin d'une aide, merci.

14 août 2006 à 23:01:26

<question></question>

Bonsoir à tous.

Il serait très aimable à quelques membres de ce forum de bien vouloir m'aider, en effet, je rencontre un problème pour insérer des images par le biais d'une feuille de style en cascade ( CSS ).

J'ai beau avoir lu et relu le tuto de M@teo (que je remercie au passage pour ces superbes tutoriaux

) ainsi que quelques sites d'aide CSS sur le net, mon image CSS ne s'affiche pas sur ma page web.

Quelques hypothèses me sont alors venues à l'esprit :
-L'image ne s'affiche pas car mon site n'est pas sur la toile (j'entends par là, pas encore hébergé )
-Ma version de Modzilla Firefox ne me permet pas de visualiser mon site avec une image en fond.
-Il faut une image d'une taille particulière voire d'un format particulier.

Bien évidemment, il est également possible, que je me sois (tout bêtement) trompé à plusieurs reprises dans la manipulation d'insertion...

Exemple : Mon fichier CSS et à cet emplacement sur mon PC : C:\site\monfichiercss
L'image que je désire mettre en fond est à l'emplacement suivant : C:\site\images\monimage

NB : L'image est en format jpg ( J'ai choisi ce format pour que l'image soit "légère" [14,2 ko] )

Je tape ceci dans mon fichier CSS :

body
{
background-image: url("./images/monimage.jpg");
}

NB : Pour une raison qui m'est inconnue, les couleurs ne s'affichent pas pour "url" et les informations qui suivent. (Pas de marron, ni de rouge)

Je vous remercie d'avance.

PS : N'hésitez pas à poser des questions, je ferai tout mon possible pour vous aider à résoudre mon problème.

Junkie.

Jcpo

14 août 2006 à 23:06:00

enleve juste le point avant le / de image

_hiddenthere

14 août 2006 à 23:14:43

L'image de fond ne s'affichera pas si tu ne précises pas une hauteur ou une largeur

Junkie

14 août 2006 à 23:44:59

Bonsoir.

Citation : Jcpo

enleve juste le point avant le / de image

Cela ne change rien.

Citation : Musachi

L'image de fond ne s'affichera pas si tu ne précises pas une hauteur ou une largeur

C'est à dire ? Peux tu m'indiquer en détails la marche à suivre pour donner une taille au fond ?
Si quelqu'un passe par là avant Musachi et s'il connait la "manip", je suis preneur

( La manip en language "Zero" si possible

)

Merci à vous deux.

_hiddenthere

15 août 2006 à 0:26:55

Tu as bien lu les cours ? :-°

Applique une largeur (width) à ton body :

body
{
width:700px;
background-image: url("./images/monimage.jpg");
}

Candygirl

15 août 2006 à 1:04:55

Citation : Musachi

L'image de fond ne s'affichera pas si tu ne précises pas une hauteur ou une largeur

Ce n'est pas valable pour l'image de fond attribuée au body qui s'affiche sur toute la surface par défaut.

Citation : Junkie

Exemple : Mon fichier CSS et à cet emplacement sur mon PC : C:\site\monfichiercss
L'image que je désire mettre en fond est à l'emplacement suivant : C:\site\images\monimage

Dans ce cas le chemin relatif vers ton image devrait être:

body
{
background-image: url("images/monimage.jpg");
}

Junkie

15 août 2006 à 1:44:05

Bonjour.

Citation : Candygirl

Dans ce cas le chemin relatif vers ton image devrait être:

body
{
background-image: url("images/monimage.jpg");
}

Ca ne marche pas non plus avec cela...

Je pense que j'ai oublié de préciser que mon site était en design extensible si cela a quelque chose à voir...

Merci d'avance.

Edit : correction d'une faute d'orthographe.

Candygirl

15 août 2006 à 1:50:17

Citation : Junkie

Je pense que j'ai oublié de précisé que mon site était en design extensible si cela a quelque chose à voir...

Non, mais par contre ça veut dire qu'il y a d'autres choses dans ta page/ton css; je pensais que tu fesais ton test "à blanc". Tu peux donner tout le code de ta page et de ton css, voir si qqch d'autre interfère peut-être ? (erreur de frape, fond redéfini par-dessus,...). Tu vois bien d'autres effets commandés par ton css sur la page ?

Junkie

15 août 2006 à 1:58:35

Bonjour.

En fait je ne voulais pas faire un post trop lourd donc j'ai juste donné une partie du fichier CSS.
Mais c'est vrai que vu que c'est mon premier, il est fort possible pour qu'il y est des fautes...

body
{

padding: 10px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url ("images/aya.jpg");

}

#en_tete
{
width: 760px;
height: 100px;
background-color: white;
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* Le menu */

#menu
{
float: left;
width: 15%;
height: 150px;
}

.element_menu
{
background-color: white;
background-image: url("...png");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}

.element_menu h3
{
color: red;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("....png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: red;
text-decoration: none;
}

.element_menu a:hover
{
background-color: white;
color: orange;
}

#corps
{
text-indent: 30px;
margin-left: 180px;
margin-bottom: 20px;
padding: 5px;

color: red;
background-color: white;
background-image: url("...png");
background-repeat: repeat-x;

border: 2px solid black;
}

#corps h1
{
color: red;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-decoration: blink;
}

#corps h3
{
height: 30px;

background-color: white;
background-repeat: no-repeat;

padding-left: 30px;
color: red;
text-align: left;
text-decoration: underline;
}

#news
{
margin-left: 180px;
margin-bottom: 20px;
padding: 5px;
border: 2px solid black;
overflow: auto;

}

#news h2
{
color: red;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#news p
{
color: red;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-size: 300%;
}

#pied_de_page
{
margin-left: none;

padding: 5px;

text-align: center;

color: red;
background-color: white;
background-image: url("...png";);
background-repeat: repeat-x;

border: 2px solid black;
}

.haut_bas
{
border-top: 1px dashed red;
border-bottom: 1px dashed red;
}

Je me permets d'insister là dessus, c'est étrange je trouve.

Citation : Junkie

NB : Pour une raison qui m'est inconnue, les couleurs ne s'affichent pas pour "url" et les informations qui suivent. (Pas de marron, ni de rouge)

C'est très gentil de ta part de m'aider, Candygirl, merci.

Candygirl

15 août 2006 à 2:05:19

arf, c'est tout bête !!
Vire l'espace entre url et ("images/aya.jpg")

Junkie

15 août 2006 à 2:32:50

Bonjour.

Citation : Candygirl

arf, c'est tout bête !!
Vire l'espace entre url et ("images/aya.jpg")

Ce n'est pas cela non plus...

Mon problème est donc toujours là, avis aux amateurs.

Encore merci Candygirl de m'aider : )

Candygirl

15 août 2006 à 2:40:19

Mais tu as bien viré l'espace parce que celui-ci fesait foirer (j'ai testé chez moi).

On pourrait aussi voir la structure html ?
Il me semble que ton image de fond ne devrait apparaître qu'à coté de ton en-tête puisque ton corps semble prendre toute la largeur et qu'il a une couleur de fond blanche...

EDIT: enfin non, sur les 10px de padding aussi... bon je vais me coucher (et je dois être vraiment fatiguée parce que je ne comprends toujours pass ce que tu veux dire par:

Citation : Pas de titre

NB : Pour une raison qui m'est inconnue, les couleurs ne s'affichent pas pour "url" et les informations qui suivent. (Pas de marron, ni de rouge)

?); bonne nuit et bonne chance

Philias

15 août 2006 à 7:38:38

Si tu essayais avec la formule background au complet ?
background:#00feed url("images/aya.jpg") repeat top center;

Sinon, essaye avec une autre image, celle là à même le dossier où se trouve le css et enlève le "images/".

Junkie

15 août 2006 à 13:39:35

Bonjour.

J'ai enfin trouvé la solution

Le problème est qu'il existait plusieurs fichiers css similaires sur mon disque dur... Donc apparemment le navigateur ne savait pas à partir de quel fichier css chercher l'image de fond. Après avoir supprimer les copies du fichier CSS, tout marche ^^.

C'était donc vraiment idiot -_-

Encore merci à tout ceux qui m'ont aidé.