[CSS]Background image

J'ai un problème avec background-image...

Sujet résolu

20 mai 2006 à 14:52:58

Bonjour à toutes et à tous.

J'ai un petit problème avec mon CSS,je veux mettre une image de fond,mais ça ne marche pas!Voici mon code CSS:

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: C:\Documents and Settings\david\Mes documents\Mes images:star-wars-10.jpg;
}

Merci d'avance.

atly

20 mai 2006 à 14:55:14

Revois les cours pour apprenre à déclarer le background-image en CSS...

woufeigh

20 mai 2006 à 14:56:09

apres background image tu dois metre quelque chose comme ca:

url("image.jpg");

Si ton image est dans le meme repertoire que le fichier css sinon bah ca donne:

url("dossier/image.jpg");

Voila plus de renseignement dans le cour du site web de m@téo

chuss

akito

20 mai 2006 à 15:01:20

Merci beaucoup,mais ça ne marche toujours pas!
J'ai modifié le code:

body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("star-wars-10.jpg");
}

TimeSplitters

20 mai 2006 à 15:02:29

si ton image ne se trouve pas à la racine de ton FTP ça ne marche pas.
De plus si tu ne l'as pas mise... c clair que ça va pas marcher quoi...

akito

20 mai 2006 à 15:05:38

Donc,il faut que je remette "c:\..."?

TimeSplitters

20 mai 2006 à 15:08:45

Non. Par exemple si ton image est sur ton FTP ( as-tu lu les annexes ? ) et est dans le dossier nommé "images" et que ton image s'appelle "star-wars-10.jpg" tu devras mettre comme code :

background-image: url("images/star-wars-10.jpg");

akito

20 mai 2006 à 15:12:04

Non,je n'ai pas lu les annexes...
Merci beaucoup!
Mais ça ne marche toujours pas...

TimeSplitters

20 mai 2006 à 15:13:36

Bah siu tu ne sais même pas ce qu'est un FTP ( voir annexe

) tu auras du mal ...

akito

20 mai 2006 à 15:14:14

Ok,merci!Je vais m'attaquer aux annexes!

Bilbou

20 mai 2006 à 15:15:22

Hopla David !

Ralalalalala les débuts c'est toujours difficile !!!

J'ai essayé d'expliquer sur un post comment fonctionnaient les liens en relatifs, il y a quelque temps, vas donc y faire un tour !

Bien que j'explique ça par rapport à du XHTML, l'idée est identique en CSS !
J'espère que ça te permettra de comprendre le système de lien en relatif !

Bon courage !

akito

20 mai 2006 à 15:19:48

Merci!
Mais je ne veux pas simplement insérer une image,je veux la mettre en fond en fait.
Sinon,d'après ce que dit le tutorial,FTP est un logiciel pour la mise en ligne,mais le mien n'est pas encore en ligne!

Bilbou

20 mai 2006 à 15:27:16

Regarde...

En XHTML, pour insérer une image, on écrit ça :

Et pour mettre en background en CSS, ceci :

background-image: url("lien_vers_ton_image.extension");

Ce que j'explique sur le lien que je t'ai donné par rapport aux chemins relatifs te sera donc sûrement utile, sachant que que ce soit en CSS ou en XHTML, le texte à tapper pour faire un lien est de la même forme !

Dans mon exemple : lien_vers_ton_image.extension.

You see ?

akito

20 mai 2006 à 15:29:04

Oui,mais c'est ce que j'ai mis,mais ça ne marche pas!

woufeigh

20 mai 2006 à 15:55:55

verifie le nom de ton image...
jpg ce n'est pas JPG

L'extension aussi faut vérifier si ce n'est pas une gif...

Etc etc etc...

akito

20 mai 2006 à 16:03:34

Non,c'est bien jpg,et non JPG,et ce n'est pas GIF,ni BMP...C'est jpg.

Bilbou

20 mai 2006 à 16:04:21

Ton image est-elle dans le même dossier que ton fichier CSS ?

akito

20 mai 2006 à 16:07:13

Heu...Oui.
En fait la même image est deux fois dans mon ordi:une fois dans les images,et une fois dans le même dossier CSS

Bilbou

20 mai 2006 à 16:09:22

Donne-nous tes codes HTML et CSS.

akito

20 mai 2006 à 16:13:00

Voici mon code CSS:

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("star-wars-10.jpg");
}

Et le code HTML est le même que tout les autres,avec "html","head","body"...

Bilbou

20 mai 2006 à 17:06:04

Oui, mais voir ton code HTML nous permettrait peut-être de régler ton problème, parce que c'est peut être tout simplement que le lien CSS/HTML est faux !

Donc, si tu veux de l'aide... :-°

Dis nous aussi exactement où sont placés les fichiers HTML et CSS l'un par rapport à l'autre.

M@th

20 mai 2006 à 21:08:43

salut,
Quand tu essaye ton site, est ce que la couleur ou les titre sont changé, est ce que le code css fonctionne ?
Car si comme a dit Bilbou que ton porbleme c'est peut-etre ton lien HTML/CSS qui et faut alors la on a beau chercher ton probleme, on trouvera pas

akito

21 mai 2006 à 13:51:57

D'accord,voici mon code HTML:

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Le monde de star wars!</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
</head>

<body>
<div id="en_tete">
</div>

<div id="menu">

<div class="element_menu">
<h3>Films</h3>
<ul>
<li><a href="page1.htm">Lien</a></li> <!–– Liste des liens du sous–menu ––>
<li><a href="page2.htm">Lien</a></li>
<li><a href="page3.htm">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Autres</h3>
<ul>
<li><a href="page5.htm">Lien</a></li>
<li><a href="page6.htm">Lien</a></li>
<li><a href="page7.htm">Lien</a></li>
</ul>
</div>

<div id="corps">

<h1>Le monde de star wars</h1><br/>
<p>Bienvenu sur mon site!</p>
<div id="pied_de_page">

</div>
</body>
</html>

Voila!
Je ne sais pas M@th,en fait je prévoyais de faire le CSS après.

Bilbou

21 mai 2006 à 13:59:57

C'est bien qu'on se disait avec M@th, il n'y a pas de lien entre ton CSS et ton fichier XHTML !
Tu veux que ça fonctionne comment ?

Vas donc relire les cours, parce que vraiment, c'est la base !

(balise <link />)

Bonne continuation !

akito

21 mai 2006 à 14:05:14

Ah oui,j'avais oublié...Merci beaucoup!

M@th

21 mai 2006 à 20:06:14

De rien