Probleme de transparence PNG

Question

sK.one1

5 Jun 2007 à 22:56

Bonjour à tous,

voila j'expose mon probleme j'ai un frond d'écrans fix et j'aimerai mettre une image avec un fond transparent pour que l'on vois le background du site sur mon image transparente... voici quelque images.

http://img511.imageshack.us/img511/2958/fondcj4.jpg

Voila le fond gris sur la partie superieur du site ne devrait pas existé j'aimerai avoir le background à la place...

Je vous donne quand même le CSS et le HTML:

body{
	background: url(img/background.png);
	color: #000;
	font-size: 80%;
	line-height: 1.6em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	border-top: 10px solid #DDD;
}

h1, h2, h3, h4, h5, h6{
	font-family: "Trebuchet MS", sans-serif;
}

h1{font-size: 1.5em;}
h2{font-size: 1.4em;}
h3{font-size: 1.3em;}
h4{font-size: 1.2em;}
h5{font-size: 1.1em;}
h6{font-size: 1em;}

pre, code{
	font-size: 1.2em;
}

pre{
	width: 100%;
	overflow: auto;
	border: 1px solid #CCC;
}

fieldset{
	border: none;
}

label{
	cursor: pointer;
	cursor: hand;
}

.field label{
	display: block;
}

input,textarea{
	border: 1px solid #999;
}

textarea{
	width: 100%;
	font-size: 1em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

a{
	color: #000;
}

a:visited{
	color: #663;
}

a:hover{
	color: #636;
}

.left{
	float: left;
	margin-right: 1em;
}

.right{
	float: right;
	margin-left: 1em;
}

/* La page
-------------------------------------------------------- */
#page{
	background: #4c4c4c repeat-y center top;
	color: inherit;
}
 
/* L'entête
-------------------------------------------------------- */
#top{
	height: 336px;
	/*padding-top: 20px;*/
	background: url(img/top.png);
}

#top h1{
	height: 80px;
	line-height: 80px;
	margin: 0 0 0 40px;
	padding-top: 20px;
	color: #FFFFFF;
}

#top h1 a{
	text-decoration: none;
	color: #FFFFFF;
}

/* Le prélude
-------------------------------------------------------- */ 
#prelude{
	background: transparent;
	color: #DFDFDF;
	text-align: center;
}

#prelude a{
	color: #DFDFDF;
	background: transparent;
}

#prelude a:hover{
	color: #666;
	background: transparent;
}

/* Le contenu
-------------------------------------------------------- */
.day-date{
	padding-left: 20px;
	margin-left: -25px;
	color: #888;
	background: transparent url(img/day-date.png) no-repeat left center;
	font-style: italic;
}

.post-title{
	color: #F90;
	background: transparent;
	margin-bottom: 0;
}

.post-title a{
	color: #F90;
	background: transparent;
	text-decoration: none;
}

.post-info{
	margin-top: 0;
	color: #FA0;
	background: transparent;
	padding-bottom: 1ex;
	/*border-bottom: 1px solid #FC0;*/
}

.post-info a{
	color: #FA0;
	background: transparent;
	text-decoration: none;
}

.post-content{
	text-align: justify;
}

.post-content blockquote{
	font-family: Georgia, serif;
	font-style: italic;
}

.post-info-co{
	text-align: right;
}

#trackbacks blockquote, #comments blockquote{
	border: 1px solid #EEE;
	margin: 1em 0;
	padding: 1ex 1em;
}

/* La barre de navigation
-------------------------------------------------------- */
#sidebar div{
	border-bottom: 1px solid #F0F0F0;
	color: inherit;
}

#sidebar div ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar h2, #sidebar h3{
	color: #9ED200;
	margin: 0 0 1ex 0;
}

#sidebar h3{
	font-size: 1em;
	margin: 0;
}

#sidebar div#search{
	background: transparent;
	color: inherit;
	line-height: 2.3em;
}

#search fieldset, #search p{
	margin: 0;
	padding: 0;
}

#q{
	padding-left: 18px;
	background: #fff url(img/q.png) no-repeat 4px center;
}

#sidebar div#calendar{
	/*border-top: 1px solid #F0F0F0;*/
}

#sidebar div#calendar table{
	font-size: 0.8em;
	text-align: center;
	margin: 0 auto;
	border-collapse: collapse;
}

#sidebar div#calendar table caption{
	margin: 0 auto;
}

#sidebar div#calendar table th{
	color: #493;
	background: transparent;
}

#sidebar div#calendar table td{
	width: 14%;
	line-height: 2em;
	border: 1px solid #EEE;
}

#sidebar div#calendar table td a{
	display: block;
	background: #EFA;
	color: #493;
	font-weight: bold;
	text-decoration: none;
}

#sidebar div#calendar table td a:hover{
	background: #DBB8DC;
	color: #636;
}

/* Le pied de page
-------------------------------------------------------- */
#footer{
	margin: 0;
	padding: 1em;
	border-top: 1px solid #CCC;
	background: #EEE;
	color: #666;
}

#footer a{
	color: #999;
}

---------------------------------

<body>

<div id="page">

<div id="top">
</div>
<div id="droite">
</div>
<div id="main">
	<div id="content">
	<?php if ($err_msg != '') : /* Si on a une quelconque erreur, on l'affiche */?>
		<div class="error"><strong>Erreur : </strong>
		<?php echo $err_msg; ?></div>
	
	<?php elseif ($preview) : /* Si on demande la prévisualisation d'un commentaire */?>
		<h3>Commentaire pour <?php dcPostTitle(); ?></h3>
		<div id="comment-preview">
			<blockquote>
			<?php dcCommentPreview(); ?>
			</blockquote>
		</div>
		
		<h3>Changer le commentaire</h3>
		<?php include dirname(__FILE__).'/form.php'; ?>
		
	<?php elseif ($mode != 'post') : /* Si aucune erreur et mode != post on affiche une liste de billets */?>
		<?php # Phrase affiché en cas de recherche (%s est le mot cherché)
		dcSearchString('<p>R&eacute;sultats de votre recherche de <em>%s</em>.</p>');
		?>
		
		<?php include dirname(__FILE__).'/list.php'; ?>
		
	<?php else : /* Sinon, mode = post, donc billet unique (avec commentaires et tout le reste)*/?>
		<?php include dirname(__FILE__).'/post.php'; ?>
	<?php endif; ?>
	
	</div>
</div>

<div id="sidebar">
	<div id="calendar">
	<h2>Calendrier</h2>
	<?php #Affichage du calendrier
	dcCalendar('<table summary="Calendrier">%s</table>'); ?>
	<span></span>
	</div>
	
	<div id="search">
		<form action="<?php dcInfo('search'); ?>" method="get">
		
			<h2><label for="q">Rechercher</label></h2>
			<p class="field"><input name="q" id="q" type="text" size="10"
			value="<?php dcSearchString(); ?>" accesskey="4" />
			<input type="submit" class="submit" value="ok" /></p>
		
		</form>
	</div>
	
	<?php /* Affichage du blog "selection uniquement si des billets sont
		présents */ ?>
	<?php dcSelection('<div id="selection"><h2>&Agrave; retenir</h2><ul>%s</ul></div>'); ?>
	
	<?php dcLangList('<div id="languages"><h2>Langues</h2><ul>%s</ul></div>'); ?>
	
	<div id="categories">
		<h2>Cat&eacute;gories</h2>
		<?php dcCatList(); ?>
	</div>
	<div id="contact">
		<h2>Contacts</h2>
		Email<br />
		Messenger<br />
		Telephone<br />
	</div>
	<div id="archives">
		<h2>Archives</h2>
		<?php dcMonthsList(); ?>
	</div>
	
	<div id="links">
		<h2>Liens</h2>
		<?php dcBlogroll::linkList(); ?>
	</div>
	
  </div>
<p id="footer"><a href="http://www.dotclear.net/"></a></p>

</div> <!-- end #page -->

<!-- Blocs en plus pour ajouter des images en tout genre si besoin -->
<div id="block1"><span></span></div><div id="block2"><span></span></div>
<div id="block3"><span></span></div><div id="block4"><span></span></div>
<div id="block5"><span></span></div><div id="block6"><span></span></div>

</body>
</html>

Merci d'avance pour vos réponse
Modifié par sK.one1 (05 Jun 2007 - 22:56)

bprod

6 Jun 2007 à 08:38

ta capture est faite avec IE voila tout Smiley lol

sK.one1

6 Jun 2007 à 18:41

non avec firefox !! Smiley ohwell

Sujet clos

CSS et mise en forme, CSS3

Probleme de transparence PNG