[CSS]Probléme avec l'image de fond

[Linksolar]

Hello!
J'ai un petit probléme avec l'affichage de l'image de fond en CSS je n'arrive pas a l'affiché.
Voila le code que j'utilise:

Code Sélectionner Étendre


body
{
   background-image:url ("image/Fond_marque_Skate.png") ;
   background-attachment: fixed;   
}
Mon fichier CSS se trouve dans le dossier: "Skate site", mon image dans le sous-dossier :"image"
Et mon image de fond ne veut pas s'afficher!
Donc merci a ceux qui répondront et a celui qui me donnerat la solution à mon probléme!!

[Couet]

Enlève les majuscules du nom de l'image, pour commencer.

[Linksolar]

J'ai suivi ton conseil et sa ne marche toujours pas.
Au faites j'ai renommé l'image maintenant c'est: "fond1"
Et le code c'est:

Code Sélectionner Étendre


body
{
   background-image:url ("image/fond1.png") ;
   background-attachment: fixed;   
}

[Geomaster]

Je dirais simplement un problème de path (est-ce que l'URL est correcte ?)

[Linksolar]

Ben l'url et en relatif et c'est: "image/fond1.png"

[Geomaster]

Ben l'url et en relatif et c'est: "image/fond1.png"

Et tu as ta page qui se trouve dans le même répertoire que le répertoire image ?

[Linksolar]

Oui mon dossier CSS et dasn le même dossier que le sous-dossiers image!

[BenObiWan]

en gros si je comprend bien tu as
/
/image/
image/fond1.png
/CSS/
/CSS/fichier.css

Donc dans ce cas il faut plutôt mettre "../image/fond1.png"

[Linksolar]

Pourquoi: ".." Faut t'il y remplacer par quelque choses!
Je sait je suis chiant!

[minishlink]

Les ".." font un retour en arrière dans la hiérarchie des dossiers.

[Geomaster]

Bah ouais, si ton répertoire CSS et image sont dans le même répertoire alors la CSS qui se trouve dans le répertoire CSS accède aux images en relatif en utilisant un path de la forme "../image/image.jpg".

Le .. correspond au répertoire parent du répertoire courant. Donc c'est bien ce que je disais : problème de path.

[Harvestland]

C'est très simple, tu as mis ton espace au mauvais endroit :

Code Sélectionner Étendre

body
{
   background-image: url("image/fond.gif") ;
   background-attachment: fixed;   
}
Chez moi ça n'a pas marché avec ton code, et quand j'ai modifié l'espace ça a marché.
J'éspère ne pas dire de bêtise mais bon vu que ça marche.

[thelvin]

Indeed, Harvestland. Mettre un whitespace entre "url" et "(", ou entre "rgb" et "(" d'ailleurs, n'est pas du CSS valide. Il fallait le voir, personnellement je ne comprenais pas pourquoi ça marchait en tapant à la main et pourquoi ça ne marchait pas en copiant/collant son exemple °.

[Linksolar]

Gné?oO?
Faut mettre une espace entre "rgb" et "(" mais c'est quoi "rgb"?

[thelvin]

Oui non mais, rien à voir, en fait. Ce qui t'intéresse toi, c'est background-image : url("machin/truc.png")

Il ne faut pas mettre d'espace dans "url(", c'est-à-dire que si tu écris "url (", alors ce n'est pas censé marcher.


Et juste comme remarque générale annexe, je précisais que c'était pareil avec rgb(0, 0, 255). Avec cette construction non plus, il ne faut pas mettre d'espace dans "rgb(".
( Et la construction rgb(0, 0, 255) ou rgb(0%, 0%, 100%) permet de définir des couleurs, genre pour mettre un fond tout bleu tout moche, on peut faire "background-color: rgb(0, 0, 255);")

[Linksolar]

A okay!
Mais sa marche toujours pas!

[DragonII]

Est ce que le reste du code marche ?   

[Linksolar]

Oui tout le reste marche.

[DragonII]

Copie-colle ce code 

Code Sélectionner Étendre



body
{
   background-image: url("image/fond1.png"); /* Le lien de l'image */
   background-attachment: fixed; /* Le fond reste fixe */
}





2 precisions 


- Attention au majuscules ! ! ! Si il y a une faute de majuscule, le code ne marchera pas, donc je te conseille de mettre que des miniscules !

- Attention au type d'image ! Verifie que c'et un png et non pas un bmp ... paske si c'est pas la bonne extension ca marche pas non + ! 


Je pense que ca marchera ^^

[Linksolar]

Bon sa marche pas je croit que je vait abandonner l'idée de mettre le lien en relatif!
Mais sa donne quoi en absolu?

[Noxneo]

http://www.tonsite.com/lien/vers/ton/image.png

[Geomaster]

Franchement, ça sert à rien d'essayer d'écouter quelqu'un qui n'écoute pas ce qu'on dit

Soit tu mets une URL relative ../image/image.gif, soit tu mets une URL absolue http://www.monsitekibug.fr/image/image.gif

Ayé ? Compris ?

[Noxneo]

Mé kan ge tap: http://www.monsitekibug.fr/image/image.gif , il trouv pa l'image ! 

[Linksolar]

Putain mais arreté de vous foutre de ma gueule merde!

Oui j'ai compris!!
J'ai bien compris qu'ils faut tapé: http://www.undergroundskateboard.fr/image/fond1.png (mon site s'appelle Underground Skateboard)
Mais c'est pas pour autant que sa marche!!

[Noxneo]

Peut être parce que le site http://www.undergroundskateboard.fr n'existe pas ?

[Linksolar]

Ouais donc je fait comment?
J'héberge l'image sous Imageshack ou un autre hébergeur comparable?

[Noxneo]

Effectivement, si tu veux mettre l'image sur un site web, il est préférable de la mettre en ligne d'abord.


:omgrunforyourlivesthiskeviniswildandloose:

[Linksolar]

Et oui je sait je suis pire qu'un Kévin mais sa marche toujours pas!

[thelvin]

Et oui je sait je suis pire qu'un Kévin mais sa marche toujours pas!

Réexplique-nous depuis le début.
Quels sont les fichiers en présence (.html, .css, .png), où sont-ils précisément (disque dur, internet, dans quels dossiers et sous-dossiers).
As-tu de bonnes raisons de penser que les autres règles CSS fonctionnent ? Lesquelles ?
Est-ce que tu arrives à afficher l'image dans ta page web avec un <img src="images/fond1.png" /> ?

Y a-t-il d'autres règles CSS concernant le background d'éléments ? Lesquelles ?

Et sois très précis et clair.

[Linksolar]

Dans mes documents j'ai un dossier: "Skate site" dans se dossier se touve mes pages xHTML et ma page CSS.
Dans se dossier se trouve aussi un sous dossier: "image" dans se sous dossier se trouve mon, ma banniére et d'autres photos.
Je suis sure que les autres "régles" fonctionnent:

Code Sélectionner Étendre

strong
{
color: red;
text-decoration:underline;
}

Les mots en gras sont bien souligné et en rouge.

Code Sélectionner Étendre

a
{
text-decoration: none;
}
Les liens ne sont pas soulignés donc c'et bon.

Code Sélectionner Étendre

a:hover
{
color: red;
text-decoration: underline;
}
Quand je passe ma souris sur les liens, ils se colorent en rouge et se soulignes donc c'est bon.

Oui il y a une régle sue le background pour ma banniére.
Voila j'éspére que je suis assez clair.

[thelvin]

Clair oui, mais à des années-lumières d'être assez précis. J'ai dit, "depuis le début".

[Linksolar]

Qu'est ce que tu sous entend par "depuis le début?
Tout les codes CSS et HTML?

[Arca]

Fait gaffe quand tu dis "Kévin", tu risque de devenir brûlant !

Qu'est ce que tu sous entend par "depuis le début?
Tout les codes CSS et HTML?

Je crois que oui !

[Geomaster]

Mais pourquoi tu ne mets pas ton image en relatif, comme tout le monde ? C'est le meilleur moyen pour que tout fonctionne peu importe où se trouve le site, que ce soit chez toi ou hébergé sur un serveur...

[thelvin]

Mais pourquoi tu ne mets pas ton image en relatif, comme tout le monde ? C'est le meilleur moyen pour que tout fonctionne peu importe où se trouve le site, que ce soit chez toi ou hébergé sur un serveur...

Ma question va paraître stupide, mais n'est-ce pas précisément ce qu'il nous dit qu'il fait ?

Rien ne cloche dans son truc, c'est pour ça que je pense qu'on va avoir besoin qu'il réexplique tout.

Encore que j'ai toujours des questions pour toi, Linksolar :

- Si dans ton code html, tu mets du <img src="image/fond1.png" alt="" />, est-ce que ça marche ?
- Tu dis que tu as des pages sont du xhtml. Avec une DTD transitionnelle ou stricte ? Si c'est du strict, es-tu bien sûr que le code soit valide ? (J'ai vu arriver de ces trucs avec des doctype stricts immérités...)

[Linksolar]

Quand je mets:<img src="image/fond1.png" alt="" /> rien ne se passe.
Pour la deuxiéme question je ne comprends pas.
C'est quoi la différence entre un DTD transisiolnel et strict?
Au faites c'est quoi un DTD?

[minishlink]

Es-tu sur Mac ? C'est peut-être de la que vient l'erreur ...
Sinon un code normal c'est comme ça :

Code Sélectionner Étendre

<!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>Essai</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <h3>Essai image</h3><br />
   <center><img src="http://forums.zelda-solarus.com/Themes/zs/images/logo.gif" alt="ZS"></center>
   </body>
   </html>

Bon ca c 'est un code d'iamge absolu .

Si par exemple, tu as le dossier "Site" où ce situe tous le site puis dedans un dossier "images" (qui a un fichier "zelda.png" et dans le dossier "Site" tu as "affiche_image.html" et ben si tu veux afficher l'image "zelda.png" et ben tu dois mettre le code ci-dessous dans "affichage_image.html" !

Code Sélectionner Étendre

<!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>Essai</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <h3>Essai image</h3><br />
   <center><img src="images/zelda.png" alt="ZS"></center>
   </body>
   </html>

C'est aussi simple que cela !

[Linksolar]

A voila!
Sa marche mais sa ne s'affiche pas sur toute la page!

[Couet]

Ça s'affiche en fond, mais sur toute la page ? C'est ça ?

Ça c'est un problème de dimensions de ton image, sachant que plus l'image sera grosse, plus ça va être lourd à naviguer.

M'enfin, je n'ai pas compris comment d'un coup ça a pu marcher alors qu'a priori, il n'y avait pas de fautes dans le code...

[Geomaster]

Quand je mets:<img src="image/fond1.png" alt="" /> rien ne se passe.

Oui, depuis le départ, il nous parle d'une URL relative mais elle est fausse, si j'en crois la description de son arborescence. Il devrait mettre ../image/fond1.png pour que cela fonctionne (aux fautes de casse près).

[minishlink]

Pour faire un fond tu dois mettre un code dans ton CSS !
Puis ensuite dans ta page HTML tu mets

Code Sélectionner Étendre


<html>
<head>
<title>Titre de la page Web</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<h1>Titre très gros</h1>
<p>Blabla blabla ....</p>
</body>
</html>

Et ensuite dans ton fichier "design.css" situé dans le MEME dossier (que j'appellerai "Site") que la page HTML citée en haut  tu mets :

Code Sélectionner Étendre


body
{
   background-image: url("images/zelda.png");
}


ATTENTION ! Le dossier "images" (qui contient le fichier "zelda.png") doit être dans le dossier "Site" !

J'espere que tout cela marche, j'ai pas vérifié ...

[thelvin]

Oui, depuis le départ, il nous parle d'une URL relative mais elle est fausse, si j'en crois la description de son arborescence. Il devrait mettre ../image/fond1.png pour que cela fonctionne (aux fautes de casse près).

Ben non, il nous a dit que son .html, son .css et le dossier qui contient son image sont tous dans le même dossier. Pas besoin de "..", donc.


À part ça :

Pour la deuxiéme question je ne comprends pas.
C'est quoi la différence entre un DTD transisiolnel et strict?
Au faites c'est quoi un DTD?

*Soupir*
Ça me prendrait des semaines pour expliquer ce qu'est la DTD de manière générale. Je vais donc seulement dire ce que les navigateurs font des DTD indiquées dans les documents XHTML.

• La DTD Transitionnelle ou stricte est ce que l'on déclare dans la balise DOCTYPE.
• La transitionnelle est plus ou moins là pour quand on veut faire du XHTML qui ressemble au HTML 4. Sous-entendu, où on ne veut pas trop se prendre la tête. En pratique, quand les navigateurs trouvent une DTD transitionnelle, ils traitent le document comme si c'était du HTML 4, et font de leur mieux pour corriger automatiquement les erreurs.
• Avec une DTD Stricte, le document indique une validité stricte du standard, sans aucune erreur de forme XML ou de schéma XHTML. Les navigateurs peuvent décider de considérer que le travail de validation a déjà été fait, et qu'il n'y a aucune récupération d'erreur à faire de leur côté. Du coup, si le document n'est pas valide, ça peut donner n'importe quoi au rendu.

En résumé, quand on fait du XHTML mais qu'on n'a pas une bonne certitude technique de pouvoir mettre un doctype avec DTD Stricte (et a fortiori quand on ne sait pas pourquoi on fait du XHTML au lieu de HTML), on doit mettre un doctype avec DTD transitionnelle ou pas de doctype du tout. Comme ça :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Code Sélectionner Étendre

<!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>Essai</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <h3>Essai image</h3><br />
   <center><img src="http://forums.zelda-solarus.com/Themes/zs/images/logo.gif" alt="ZS"></center>
   </body>
   </html>

AAaaaaaaaaargh ! *Pleure*. Pourquoi tant de haaaaaaiiiiiiiine ? On se fait chier à établir des standards clairs et permettant à chacun de s'y retrouver et tout le monde nous les massaaaaaaaaacre !
Oooooooouuuuuuuuuiiiiiiiinnnnnnn !

Bref.
Minishlink, ce code-là est un exemple très précis de ce qui ne devrait pas indiquer une DTD stricte, bien qu'il le fasse quand même. XML mal formé, utilisation de balises <center> bien qu'elles n'existent plus, etc... Si ce truc ne marchait pas, ça n'aurait rien d'étonnant.

[minishlink]

Bah comment tyu fais pour mettre un center alors 
t puis on s'en fou si c'est pas aux normes .... C'est juste que ensuite quand tu mets en ligne ton site tu corrige tout mais bon ...

[Couet]

Bah comment tyu fais pour mettre un center alors 

En css inclu dans l'html, par hasard ?

[thelvin]

Yup Couet.

Ou alors, si vraiment on tient à la balise <center>, on ne déclare pas une DTD stricte, mais transitionnelle.

Sinon, j'admets qu'il n'y a pas mort d'homme quand on poste un exemple de code XHTML invalide sur un forum. Mais par pitié, qu'on cesse d'indiquer des doctypes stricts dans des exemples faits à la va-vite T_T.

[Linksolar]

Bon je comprend pas quand je mais l'adresse relative dans le page en xHTML sa marche et quand je le mais dans le page en CSS!
Il n'y aurait pas un moyen de mettre l'image de fond en code xHTML dans la page xHTML?

[minishlink]

Ben, non c'est pas possible à moins de mettre le code CSS directement dans la page xHTML (mais c'est pas beau !) ....

[thelvin]

Bon je comprend pas quand je mais l'adresse relative dans le page en xHTML sa marche et quand je le mais dans le page en CSS!
Il n'y aurait pas un moyen de mettre l'image de fond en code xHTML dans la page xHTML?

Bon, ils sont où, tes fichiers ^^ ? Je vais regarder moi-même.


(Edit : supprimé passage sans aucun sens et toutes mes confuses à minishlink).

[minishlink]

La citation de moi dans ton dernier post, thelvin, c'était pour dire à Linksolar que l'on ne peut pas mettre quelque chose en fond de page sans avoir besoin du CSS !