28172 sujets

CSS et mise en forme, CSS3

Problème affichage arrière plan qui ne s'étire pas en CSS

Bonjour à tous,
Je me permets de vous solliciter car je rencontre un problème d'affichage d'un arrière plan de mon header.
Il y a 2 ans j'ai vais essayé de créé un site, mais juste au niveau local ( que sur mon PC ). L'arrière plan s'affichait sur toute la largeur de mon écran.
Voici ce que çà donnait en apparence pour que vous compreniez ce que je veux comme rendu de mon arrière plan étiré sur toute la largeur de la page:
(Il s'agit des rayures grises)
http://img15.hostingpics.net/pics/582989Larrireapparaitsurtoutelalargeurdelapage.png

Voilà le code HTML de l'ancien site : (Le header était en flash, mais c'est anecdotique ici )
[code=html]
<div id="header">
	<div class="header1"> 
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
		codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
		width="1000" height="319">
		<param name="movie" value="Header/etoile_qui_scintille1.swf" />  
		<param name="quality" value="high">
		<param name="wmode" value="transparent"/>
		<param name="bgcolor" value="transparent">
		<!--[if !IE]> <-->
		<object data="Header/etoile_qui_scintille1.swf"
		width="1000" height="319" type="application/x-shockwave-flash">
		<param name="quality" value="high">
		<param name="bgcolor" value="transparent">
		<param name="wmode" value="transparent"/>
		<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
		FAIL (the browser should render some flash content, not this).
		</object>
		<!--> <![endif]-->		
	</div>
</div>

[/CODE]
Voilà le code CSS de l'ancien site :
[code=css]body
{
   width: 1000px;
   margin-left: auto; /* Pour centrer notre page */
   margin-right: auto; 
   margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 0px;    /* Idem pour le bas du navigateur */
   background-image: url("Header/arrière_plan_rayure_header4.png");
   background-repeat : repeat-x;
   background-color: #000000;
   text-align: center; 
   font-family: Verdana, font-family, Comic Sans MS, Arial, serif, sans-serif;
}

img
 {
display: block;
margin: auto;
}
*
{
margin: 0;
padding: 0;
}

/* Mon HEADER */
#header
{
   float: left;
}
.header1
{
   width: 998px;
   height: 317px;
   margin-left: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("Header/header1.png");
   background-repeat: no-repeat;
   margin-bottom: 0px;
   padding-top: 2px;
}

[/CODE]

La je suis entrain de créer un site de foot, mais je veux le même arrière plan pour mon header, mais il ne s'affiche pas sur toute la largeur de l'écran, alors que c'est le même code.
Je ne comprends pas, j'ai essayé de modifié pleins de chose dans le code mais rien à faire, il s'affiche qu'en 1000 px centré.
Quand je mets width : 1000 px pour le body et pour le header1, il affiche l'arrière plan centré sur 1000 px, mais pas sur toute la page.
Voici ce que çà donne en apparence :
http://img15.hostingpics.net/pics/972170Larrireapparaitmaiscentretpassurtoutelalargeurdelapage.png
[B]
Voilà le code HTML du nouveau site : ( Pas de header flash cette fois ci )[/B]
[QUOTE]
<body>
		<div id="header">
			<div class="header1"> 
								
					
			</div>
		</div>
    </body>
[/QUOTE]
Voilà le code CSS du nouveau site :
* 
[code=css]{
  list-type-style: none;
    padding:0;
   margin:0;	
}

img
{
   display: block;
   margin: auto;
} 

body
{
   width: auto;
   margin-left: auto; /* Pour centrer notre page */
   margin-right: auto; 
   margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 0px;    /* Idem pour le bas du navigateur */   
   background-repeat : repeat-x;
   background-color: #000000;
   text-align: center; 
   font-family: Verdana, font-family, Comic Sans MS, Arial, serif, sans-serif;
}
  
  
/* Mon HEADER */
#header
{
   float: left;
}
.header1
{
   width: auto;
   height: 317px;
   margin-left: auto; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/header/arrière_plan_rayure_header1.png");
   background-repeat: repeat-x;
   margin-bottom: 0px;
   padding-top: 2px;
}

[/CODE]
Sur l'ancien site, pour width: 1000 px, il affichait bien sur toute la largeur de la page. Incompréhensible pour moi.
J'ai alors essayé de mettre width : auto; et la c'est pire, l'arrière plan disparait complètement.
Regardez ici :
http://img15.hostingpics.net/pics/312387Larriredisparait.png
Merci à vous de m'éclairer et de m'aider sur ce qui ne va pas dans l'affichage de cet arrière plan S'il vous plait.
Cordialement.
Modifié par Spirit94 (02 Apr 2014 - 16:47)
Si tu veux que ton motif s'affiche tout le long de la page tu peux utiliser ça:

body {
background: url("images/header/arrière_plan_rayure_header1.png") repeat-x;
background-color:black;
}
Sujet clos
Aller à