Comment insérer une image en CSS [Fermé]

Bastien572 - 29 mai 2010 à 19:16 - Dernière réponse :  Bastien572
- 27 juin 2010 à 16:03
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/..."></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/..." 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="http://monsite.voila.fr/... + 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;
}

Afficher la suite 

4 réponses

le hollandais volant 5010 Messages postés samedi 8 mars 2008Date d'inscription 14 octobre 2017 Dernière intervention - 29 mai 2010 à 19:42
0
Utile
Salut !

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

h1:before {
    content: url(MON_IMAGE);
}
Bastien572 - 16 juin 2010 à 14:42
0
Utile
1
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 !
le hollandais volant 5010 Messages postés samedi 8 mars 2008Date d'inscription 14 octobre 2017 Dernière intervention - 17 juin 2010 à 12:59
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:"
Bastien572 - 27 juin 2010 à 16:03
0
Utile
Merci beaucoup pour votre aide je vous donne l'adresse web de mon site http://magic-mania.voila.net/