28220 sujets

CSS et mise en forme, CSS3

Problème de background selon navigateurs

Bonjour,

J'ai un soucis de centrage sur une image dans le background, voilà mon code :

<style type="text/css">
   body   
   {
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #FFFFFF;
	font-family: Verdana,Arial,Geneva,sans-serif;
	background-image: url(images/fond_03.jpg);
	background-repeat: no-repeat;
	background-position: center center;
   }
   #page   
   {
	position: absolute;
	width: 740px;
	margin-left: -375px;
	left: 50%;
	height: 560px;
	margin-top: -280px;
	top: 50%;
	/*border: 1px solid #CC4602;
	background-color: #FFFFFF;
	*/
   }
</style>


dans IE c'est bon, mais dans firefox mon image ne se centre pas verticalement.

merci d'avance pour votre aide
Bonjour centaure,

Essaie ceci :


background-position: center;
ou
background-position: 50% 50%;
Salut,
peut être aussi tester :
html, body { height: 100%; width: 100%; }

..sinon fais voir ton code.
Modifié par dhjapan (14 Apr 2006 - 15:05)
Salut, j'ai testé tout ceci sans résultat, voici le code de ma page :

<?xml version="1.0" encoding="iso-8859-1"?><!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1"  
/>
<title>- MON TITRE -</title>
<style type="text/css">
    body
    {
margin: 0;
padding: 0;
text-align: center;
background-color: #FFFFFF;
font-family: Verdana,Arial,Geneva,sans-serif;
background-image: url(images/fond_03.jpg);
background-repeat: no-repeat;
background-position: center center;
    }
    #page
    {
position: absolute;
width: 740px;
margin-left: -375px;
left: 50%;
height: 560px;
margin-top: -280px;
top: 50%;
    }
</style>
</head>
<body background="images/fond_03.jpg">
<div id="page">
   <div id="contenu">
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ 
swflash.cab#version=6,0,0,0"
  width="740" height="560" id="index" align="">
       <param name="movie" value="index.swf" />
       <param name="menu" value="false" />
       <param name="quality" value="best" />
       <param name="wmode" value="transparent" />
       <param name="bgcolor" value="#FFFFFF" />
       <embed src="index.swf" menu="false" quality="best"  
wmode="transparent" bgcolor="#FFFFFF"  width="740" height="560"  
name="index" align=""
  type="application/x-shockwave-flash"  
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
     </object>
   </div>
</div>
</body>
</html>


MERCI D'AVANCE POUR VOTRE AIDE SI PRECIEUSE !
Ca marche pour moi sous FF et sous IE :

Si tu mets un 
body {border: solid 1px red;}
tu verras le problème ... j'ai ajouté 
html, body { height: 100% }
et ca à reglé le problème.
Sujet clos
Aller à