Comment insérer une image en CSS

Bastien572 -  
 Bastien572 -
Bonjour !

Mon probleme est que je n'arrive pas (Dans le CSS) ajouter des images pour tout le site web a coté du h1 qui est Magic-Mania.

Comment ajouter ces images dans le css ???

En espérant de rapides réponses Bastien572.





























































CODE HTML :

<?xml version="1.0"?>
<!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" lang="fr">
<head><META NAME="Description" CONTENT="La magie bluffante et la plus populaire qu''''''''il soit. Magic-mania vous offre des vidéos de magie jamais vues réalisées par un magicien exceptionel "JOJOMAGIC"">
<META NAME="Keywords" CONTENT="magic,mania,monsite,tour de magie,magie,-,bluff,Magie,MAGIE,voila">
<META http-equiv="Content-Language" content="fr">
<META NAME="Author" CONTENT="Jojo-magic">









<EMBED SRC="/sons/pok.mid/" AUTOSTART="True" HIDDEN="True" loop="True">

<BGSOUND SRC="/sons/pok.mid/" loop="Infinite">


<title>Magic-Mania</title>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />


<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
<div id="conteneur">
<div id="en_tete1">
<div id="header">
<h1>Magic-Mania</h1>
<ul id="menu">
<li><a href="index.html">Accueil</a> - </li>
<li><a href="News.html">News</a> - </li>
<li><a href="Meilleures.html">Meilleures vidéos</a> - </li>
<li><a href="Catalogue.html">Catalogue des vidéos</a> - </li>
<li><a href="Trucs.html">Trucs et astuces</a> - </li>
<li><a href="Remerciments.html">Remerciments</a> - </li>
<li><a href="contact.html">Contact/Livre d'or</a></li></ul>
</div>


<div id="contenu">




<h2>Vidéo d'explication</h2>
<object width="500" height="405"><param name="movie" value="http://www.youtube-nocookie.com/v/LIyMwxtcwE4&hl=fr_FR&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/LIyMwxtcwE4&hl=fr_FR&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="405"></embed></object>
<BR>
<BR>

<h2>Nouveau site !</h2>
<p>Ce site a été concu pour la joie et le bonheur de tous sur la magie. Des vidéos seront exclusivements déposées sur ce site en avant première. Les magiciens que nous sommes ne sont que des amateurs mais ne vous inquiéter pas, les tours sont garantis HUMOURISTIQUES ET BLUFFANTS. MERCI et BONNE VISITE !</p>
<BR>
<h2>Problème détecté !</h2>
<p>Un problème a été détecté au sein de ce site web ! La faute n'est pas très grave mais je conseillerai aux utilisaturs de IE6 de 7 ou de 8.De passez sous:<BR>
-Google Chrome® pour les Netsbooks et les PC qui rames.<BR>
-Mozilla Firefox® pour les autres PC.<BR>
Ces deux navigateurs web's vous simplifieront la vie grâce a leurs excellente vitesse de navigation et a leurs simplicité ! <BR>

Merci !!!<BR>

<B>Article écrit par Bastien572, le 4 avril 2010 a 21h30.</B></p>





</div>
<p id="footer">Copyright 2007 - Interface par Helium Code par Graph-Max pour <a href="http://www.kits-gratuits.net">Kits-Gratuits.net</a></p>
<CENTER>Copyright 2010 - Magic-Mania...La prestigigitation moderne</CENTER>
</div>



<script language='javascript'>document.write('<img src="https://www.118712.fr/sortir.html + Math.round(Math.random()*100000) + '" width=1 height=1>'); </script>
<script language='javascript'>document.write('<img src="http://e.voila.fr/cgi-bin/ft/10000033638?&page=magic-mania_index.html&n=' + Math.round(Math.random()*100000) + '" width=1 height=1>');</script></body>
</html>
















































CODE CSS:


/* CSS Document */
/* Copyright : Interface par Helium - Découpe par Graph-Max pour Kits-Gratuits.net */
/* Interface par Helium - Découpe par Graph-Max pour Kits-Gratuits.net MODIFIEE par Bastien572...Copie de ce CSS interdite...téléchargement original sur Kits-Gratuits.net autorisé !*/



body {
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.7em "Trebuchet MS", helvetica, sans-serif ;
background: #000

}





div#conteneur{
width: 770px ;
margin: 0 auto ;
text-align: left ;
}

div#header {
background : url(images/header.png) no-repeat center top ;
height : 158px;
margin-top : -15px;
}



h1{
height : 128px;
text-align: center;
font-size:50px;
color: #000000;
}

ul#menu {
text-align: center;
margin-top : -34px;
color: #000000;
}

ul#menu li {
display:inline;

}
a { color: #D50909; }
a:hover { color:#610505; }

div#conteneur{
background : url(images/bg.png) repeat-y center ;
color: #FFBA00;
margin-top: -1px;
}

div#contenu{
text-align: left;
margin-left: 125px;
margin-right: 125px;
}


div#contenu a:hover{
color: #ffffff
}

p#footer{
clear: both;
padding-top:75px;
margin:0;
background : url(images/footer.png) no-repeat center ;
height: 65px;
text-align: center ;
color: #d50909 ;
}

h2 {
font-size:12px;
}

3 réponses

Réponse 1 / 3
le hollandais volant Messages postés 4998 Date d'inscription   Statut Membre Dernière intervention   1 057
 
Salut !

Je ne vois pas trop ce que tu veux faire, mais tu peux tenter ça : 

h1:before {
    content: url(MON_IMAGE);
}
0
Réponse 2 / 3
Bastien572
 
Merci beaucoup !

Hier j'ai enfin réussi a mettre mon image tout ça parce que j'avais mis sur le CSS image.jpg au lieu de jpeg !

du coup j'ai pu faire h1:before et h1:after.

L'ultime problème est que plus mon image est grande plus le titre du h1 descend !

Merci svp de me donner la soluce a ce problème
+
Un logiciel ou un code pour redimensionner son image
MERCI !
0
le hollandais volant Messages postés 4998 Date d'inscription   Statut Membre Dernière intervention   1 057
 
L'image, tu peux le redimensionner avec Paint, tout simplement.

Pour center le titre en face de l'image : 
h1 { 
   line-height: 1em; 
   vertical-align: middle; 
}


Si ça ne marche pas, essaie avec un "line-height:" de 2em ou carrément sans "line-height:"
0
Réponse 3 / 3
Bastien572
 
Merci beaucoup pour votre aide je vous donne l'adresse web de mon site http://magic-mania.voila.net/
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse