créer un site


Image de fond de site en CSS2

Poster un nouveau sujet sur css   Répondre au sujet à css:Image de fond de site en CSS2    Accueil Forum -> css
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
gkergal
frontpage mioche
frontpage mioche
MessageImage de fond de site en CSS2 , Posté le: 10-05-2005 23:26

Salut tous !

Je me débute en CSS et il y a un truc qui me dépasse vraiment Shocked : je voudrais tout simplement mettre une image jpg en fond de site. J'ai fait une feuille de style externe avec

Code:

fond1 {
background: url("http://archeo.grece.free.fr/images/menud.jpg");
background-repeat: no-repeat;
background-attachement: fixed;
}


c'est surement très bête, mais je ne parviens pas à trouver ce qu'il faut écrire dans ma page HTML. Dans l'en-tête il y a ça :

Code:

<link rel="stylesheet" type="text/css" href="style.css">


Mais qu'est ce qu'il faut écrire dans le body pour que l'image soit prise en compte en fond de site ?

Ça crains pour la suite si j'arrive même pas à faire ça Evil or Very Mad

Merci beaucoup pour votre aide !
seighin
html mioche
html mioche
MessageRe: Image de fond de site en CSS2 , Posté le: 11-05-2005 2:15

gkergal a écrit:


Mais qu'est ce qu'il faut écrire dans le body pour que l'image soit prise en compte en fond de site ?

Ça crains pour la suite si j'arrive même pas à faire ça Evil or Very Mad

Merci beaucoup pour votre aide !


dans la feuille de style, il faut mettre ton image dans le body .

Code:

body {
background: url("http://archeo.grece.free.fr/images/menud.jpg");
background-repeat: no-repeat;
background-attachement: fixed;
}
gkergal
frontpage mioche
frontpage mioche
MessageImage de fond de site en CSS2 , Posté le: 11-05-2005 6:42

Il faut forcément que ça s'appelle "body" ? On ne peut pas le nommer autrement ? Pur chaque fond de page différent il faut faire une nouvelle feuille de style ?

Voilà donc mon code dans la feuille de style :

Code:

body {
background: url("http://archeo.grece.free.fr/images/menud.jpg");
background-repeat: no-repeat;
background-attachement: fixed;
}


et dans ma page HTML (en simplifié) :
Code:

<html>
   <head>
      <title>Contact lien e-mail</title>
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="../animate.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
   </head>

   <body onload="dynAnimation()" language="Javascript1.2" link="#FFFFFF" vlink="#CCFF33" alink="#FFCC00">

<h3 dynamicanimation="fpAnimelasticRightFP1" id="fpAnimelasticRightFP1" style="position: relative !important; visibility: hidden" language="Javascript1.2"><font face="Arial"><b>CONTACTS</b></font></h3>
<p align="center"><font face="Arial"><b>Pour me contacter :</b></font><br><br>
<a href="mailto:gwenaelle.kergal@etu.u-bordeaux3.fr">
<img border="0" src="../animations/mail6.gif" width="100" height="60"></a></p>
   </body>
</html>


j'ai remplacé "fond1" par "body" mais rien ne se passe. Il n'y a rien à écrire dans le "body" de la page HTML où on veut qu'il apparaisse ?
seighin
html mioche
html mioche
MessageImage de fond de site en CSS2 , Posté le: 11-05-2005 8:04

Salut,
verifie bien tes chemins pour tes images, tel que c'est ecrit dans le code, ton image provient d'un site web.

ensuite tu peux, pour commencer, simplifier tout ca. Je ne sais pas tout ce que tu as dans ta balise body
mais laisse juste <body>, pareil pour h3, ecrit juste <h3> et definis tout ce qui concerne la mise en forme dans ta feuille de style.

Essaie d'obtenir ce que tu veux pour une page et tu verras apres si tu veux changer pour chaque page (mais c'est pas tres recommande, c'est bien d'avoir une uniformite tout au long du site)
SIBELIUS
html mioche
html mioche
MessageImage de fond de site en CSS2 , Posté le: 11-05-2005 9:26

gkergal a écrit:
Il faut forcément que ça s'appelle "body" ? On ne peut pas le nommer autrement ? Pur chaque fond de page différent il faut faire une nouvelle feuille de style ?

Si tu veux que le fond s'applique au document, alors oui l'élément qui désigne le document est <body>.

Mais tu peux également utiliser un autre sélecteur, comme tu as essayé de le faire avec ton premier code :
Code:
fond1 {
background: url("http://archeo.grece.free.fr/images/menud.jpg");
background-repeat: no-repeat;
background-attachement: fixed;
}


Cependant il faut bien faire attention, ton sélecteur "fond1" désigne une balise qui n'existe pas : <fond1>.
Si tu veux créer des classes, il faut ajouter un point (.) avant ton nom de sélacteur.
Par exemple ".fond1"

Tu pourras alors désigner n'importe quel élément possédant cette classe, par exempe <p class="fond1">bla bla</p> Smile
gkergal
frontpage mioche
frontpage mioche
MessageImage de fond de site en CSS2 , Posté le: 11-05-2005 10:23

Merci beaucoup, ça commence à s'éclaircir un peu... Very Happy

Donc, il suffit de garder <body></body> dans ma page html ainsi que le lien dans la tête, pour que ça appelle l'image définie par body{...} dans ma feuille de style. Ça, c'est OK.

Pour l'url que j'ai mise, c'est l'adresse internet de mon site et là où est rangée mon image. Il faudrait que je mette son adresse de répertoire sur mon PC ? Je ne comprends pas trop... Confused

Pour le titre H3, c'est une petite animation DHTML automatique que j'ai trouvée dans le logiciel (je fais mon site sur FrontPage), mais le texte change pour chaque page, donc je ne pense pas pouvoir le mettre dans la feuille de style, si... ?
seighin
html mioche
html mioche
MessageImage de fond de site en CSS2 , Posté le: 11-05-2005 20:33

si je peux te faire une suggestion, comme tu as l'air de vouloir apprendre, laisse tomber frontpage et utilise un editeur de texte comme HTML Kit http://www.htmlkit.com/download/ ou first page evrsoft http://www.evrsoft.com/ .

pour l'image, tu peux mettre des chemins relatifs, si tu as un fichier "images" avec toutes tes images, ca donnera ca:
Code:

"../images/menud.jpg"
Montrer les messages depuis:   
Poster un nouveau sujet sur css   Répondre au sujet à css:Image de fond de site en CSS2    Accueil Forum -> css Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales