Posez votre question Signaler

Comment insérer une image en CSS

Bastien572 - Dernière réponse le 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;
}
Lire la suite 
Réponse
+0
moins plus
Salut !

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

h1:before {
    content: url(MON_IMAGE);
}
Ajouter un commentaire
Réponse
+0
moins plus
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 4978Messages postés samedi 8 mars 2008Date d'inscription 25 mai 2014 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:"
Répondre
Ajouter un commentaire
Réponse
+0
moins plus
Merci beaucoup pour votre aide je vous donne l'adresse web de mon site http://magic-mania.voila.net/
Ajouter un commentaire
Ce document intitulé «  Comment insérer une image en CSS  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.