Background en css

Résolu
Bonjour,

Je souhaite mette mon image de fond en bas et centré j'ai donc fais :
body {
	background: url(images/bg.png) bottom center;
        background-repeat:repeat-x;
}

Je répète mon image sur les côté car elle est trop petite, mais comme cela ca ne marche pas, l'image se situe tout en haut, et vois 2mm du fond donc en gros pas grand chose comment faire pour qu'il me répète mon background sur les côtés et le mettre en bas centré ?
Merci de vos réponses

6 réponses

  1. essayes avec ceci:
    body 
    { 
    background-image:url('images/bg.png'); 
    background-repeat:repeat-x; 
    background-position:center bottom; 
    } 


    avec x l'arrière plan ne se répète que horizontalement ...

    j'espère avoir répondu à ta question...
    1. Non ca fait toujours la même chose...
  2. tu es avec quel navigateur?
    sous firefox j'ai le problème , mais pas avec safari... (sous mac)
    1. body {
      background-image: url('bg.png');
      background-repeat: repeat-x;
      background-position: bottom center;
      background-attachment: fixed;
      height:100%;
      }

      la ça marche :D
      1. Merci, en effet ca fonctionne :)
        Sinon encore une question :
        voila la présentation de ma page :
        <div class="head">
        	<div style="padding-top:50px;">ACCUEIL OFFRES CONTACT</div>
        	<br />
        	<div class="accroche">
        	<div class="text_accroche">
        	</div>		
        </div>
        

        Mon souci c'est que quand je bouge mon menu (ACCUEIL OFFRE CONTACT) pour le décaler, il me décale également mon image se situant dans ma div accroche
        Comment faire pour distinguer les deux ?
      2. que veux tu dire par décaler?
        tu veux dire en haut ou sur les cotés?
      3. Par exemple, si je fais un padding-top, il me bouge mon menu + mon image alors que je voudrais seulement qu'il bouge mon menu
      4. c'est normal...
        il faut que tu imposes à ta div menu une hauteur supérieure de sorte à ce que ça ne bouge pas quand ça descend un peu

        si tu veux parcontre remonter un peu ton autre texte, met un margin négatif
      5. Je comprends pas trop :/
        Voici mon code html :
        <div class="head">
        	<div class="menu">&nbsp;PARTICULIERS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; PROFESSIONNELS &nbsp;&nbsp;&nbsp; NOS OFFRES</div>
        	<br />
        	<div class="accroche">
        	<div class="text_accroche">HCBOX, un portail de prévention et de suivi de la santé, gratuit, anonyme et sérisé, disponible en tous lieux.</div>
        	</div>	
        		<table align="center" border="0" width="940px">
        		<tr>
        			<td width="420px"><div class="texte">Je suis abonné <br /></div><div class="texte2">J'accède à mon portail</div></td>
        			<td width="420px"><div class="texte2">Je m'abonne gratuitement <br /><img src="images/ACCES_PARTICULIER.png"></div></td>
        		</tr>
        		</table>
        </div>
        

        Et voici mon css :
        @charset "UTF-8";
        html
        {
        font-family:Times New Roman;
        }
        body{
        background-image: url(images/bg.png);
        background-repeat: repeat-x;
        background-position: bottom center;
        background-attachment: fixed;
        height:100%; 
        background-color:#d1dce3;
        
        }
        .head
        {
        	width: 1280px;
        	height:659px;
        	background:  url(images/1-ACCUEIL5.png) no-repeat top center; 
        	margin: 0 auto; 
        }
        .menu
        {
        font-family:Arial;
        color:#2a5065;
        height:1200px;
        font-size:11px;
        margin-left:170px;
        padding-top:52px;
        }
        a
        {
        text-decoration:none;
        color:#2a5065;
        }
        a:hover
        {
        color:#e3335a;
        }
        .accroche
        {
        background-image:url(images/ACCROCHE.png);
        background-repeat:no-repeat;
        text-align:center;
        margin:0 auto;
        width:940px;
        height:312px;
        padding-top:30px;
        }
        .text_accroche
        {
        margin-left:100px;
        padding-top:130px;
        width:300px;
        text-align:justify;
        margin-left:620px;
        color:#2a5065;
        font-family:Times New Roman;
        font-style:italic;
        font-weight:bold;
        }
        .texte
        {
        font-family:Times New Roman;
        color:#2a5065;
        font-style:italic;
        font-weight:bold;
        }
        .texte2
        {
        font-family:Times New Roman;
        color:#2a5065;
        }
        

        La mon menu est bien placé ! mais par contre mon div accroche est carrément en bas...
    2. ton menu fait une hauteur de 1200 px? oO
      1. LOL, non non c'était juste un test...
        Mais mon div accroche est toujours un poil plus bas :(
      2. ok lol mais moi je te disais juste des tailles genre 180 px etc mais je ne vois pas trop ce que tu veux faire...

        le truc c'est que si tu agrandis ta div de menu elle va forcément repousser celle d'en dessous....
      3. En faite j'ai trois div :
        j'en ai un qui me permet de mettre la structure de mon contenu (fond, blanc et logo),
        une autre qui est à l'intérieur du premier div me permet de mettre mon menu ensuite j'ai un autre div pour mon image...
        Donc en gros, j'ai mon div de strucure et par dessus j'ai mon menu et mon image, mais quand je veux bouger mon menu, il me bouge également mon image alors que j'veux pas, je veux que les deux soit indépendant.
      4. Bon finalement j'ai trouvé un truc qui à l'air de fonctionner j'ai arranger mes fichiers images, mais maintenant je veux passer une image en dessous d'une autre.
        Je dois faire ca avec les z-index ?
      5. quand tu parles de l'image tu parle ode l'arrière plan??

        c'est normal au lieu de mettre des valeurs en pixels, mets plutôt des valeurs en pourcentages...

        Exemple: 
        height: 100%;
    3. si le problème est résolu peux tu marquer le post comme résolu stp?
      1. Oui c'est un peut ça mais j'ai aussi trouver ça sur internet et li est auusi complet http://www.echoinformatique.com/modifier-le-background-dun-element-html-avec-le-css/