Problème corps image de fond

**koukic11** · 25/01/2010, 20h41

Bonsoir

Je me (re)tourne vers vous pour une autre question. Dernièrement, je posais la question comment centrer 1 site, avec un bandeau, un menu horizontal, un menu de gauche, un corps central, un menu de droite et un pied de page. Et grace à "nsanabi" qui m'a donné la solution, le site est centré, avec tout au bon endroit et tout, et tout !

Centrer site

Maintenant, j'ai 1 autre petite problème. Dans le corps, j'affiche des infos. Et des fois, cela dépasse. Donc, je fais apparaitre un scroll vertical uniquement sur le corps. Mais j'ai l'image qui ne reste pas "attaché", elle défile du haut vers le bas. J'ai essayé de la fixer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-attachment: fixed;

, mais le corps se barre sous le menu de gauche. Alors, j'ai essayé de rajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-position: center;

et l'image se centre mais bien sûr, centrer pour le navigateur, pas pour mon site !

Comment faire ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#corps
{
	height: 496px;
	width: 571px;
	position: relative;
	/*top: 196px;*/
	/*left: 500px;*/
	/*text-align:center;*/
	float : left;
	background-image: url("../images/corps_central.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	overflow: auto; 
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="corps">
<p>TEST</p>
</div>

Merci d'avance.

**12monkeys** · 26/01/2010, 09h25

Bonjour

Ce que tu veux faire n'est pas possible : une image d'arrière plan fixe l'est par rapport à la zone de visualisation du navigateur, et il n'y aura qu'une seule zone de visualisation...

http://css.developpez.com/faq/index....ACKGROUND_fixe

**koukic11** · 26/01/2010, 11h01

Merci pour ta réponse.

Comment dois-je faire alors ? Il n'existe pas de solution ? Grace à ton lien, j'ai essayé avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-position-x: 335px; background-position-y: 196px;

au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-position: center;

mais c'est vrai que c'est bon sur le moment, mais après dès que je teste sur Firefox ou que je change de résolution (900 x 600 par exemple), c'est plus bon....

T'as 1 idée ?

**12monkeys** · 26/01/2010, 11h37

On peut voir une page en ligne pour voir ce que ça donne ?

**koukic11** · 26/01/2010, 12h05

Voilà, je viens de mettre en ligne : http://www.socarcassonne.fr/TEST/test.php

Ce n'est qu'un test pour l'instant, il n'y a pas les bonnes images, tu te doutes bien. Mais ce que je cherche à faire, c'est avoir l'image "corps" dans son cadre (si je peux dire comme ça) et qu'elle ne se répête pas. Or, là, elle est collée sous le menu de gauche.

Je mets les codes aussi

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
body 
{
  margin : 0px; 
  padding : 0px;  
  text-align: center; 
}
 
.centrer 
{
  margin-left : auto;
  margin-right : auto;
  width : 970px;
  text-align : left;  
}
 
#en_tete_banniere
{
	height: 177px;
	width: 970px;
	position: relative;
}
 
#menu_horizontal
{
	height: 19px;
	width: 970px;
	position: relative;
}
 
a img
{
   border: none; 
}
 
#menu_gauche
{
	height: 496px;
	width: 182px;
	position: relative;
	float : left;
}
 
#ss_menu_gauche
{
	height: 452px;
	width: 182px;
	position: relative;
}
 
#contacts
{
	height: 44px;
	width: 182px;
	position: relative;
}
 
#corps
{
	height: 496px;
	width: 571px;
	position: relative;
	/*top: 196px;*/
	/*left: 500px;*/
	/*text-align:center;*/
	float : left;
	background-image: url("corps_central.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	/*background-position: center;*/
 
	/*background-position-x: 335px;
	background-position-y: 196px;*/
 
	overflow: auto; 
}
 
#menu_droite
{
	height: 496px;
	width: 217px;
	position: relative;
	float : right;
}
 
#menu_droite1
{
	height: 46px;
	width: 217px;
	position: relative;
}
 
#menu_droite2
{
	height: 126px;
	width: 217px;
	position: relative;
}
 
#menu_droite3
{
	height: 179px;
	width: 217px;
	position: relative;
}
 
#menu_droite4
{
	height: 145px;
	width: 217px;
	position: relative;
}
 
#pied_de_page
{
	height: 22px;
	width: 970px;
	position: relative;
	background-image: url("bas_de_page.jpg");
	/*background-repeat: no-repeat; */
	clear: both;
}

PHP :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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" >
	<head>
		<title>test</title>
		<meta http–equiv="Content–Type" content="text/html; charset=utf–8" />
		<link rel="stylesheet" media="screen,print,handheld" type="text/css" title="test" href="standard4.css" />
		<script src="fonction_java.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="centrer">
			<!-- EN TETE -->
			<div id="en_tete_banniere">
				<img src="bandeau.jpg" alt="" />
			</div>
			<!-- MENU HORIZONTAL -->
			<div id="menu_horizontal">
				<img src="menu_hor.jpg" alt="" />
			</div>
			<!-- MENU DE GAUCHE -->
			<div id="menu_gauche">
				<div id="ss_menu_gauche">
					<img src="photo_accueil.jpg" alt="" />
				</div>
				<div id="contacts">
 
				</div>
			</div>
			<!-- CORPS CENTRAL -->
			<div id="corps">
				<p>Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? Alors ? ou cela s'écrit ? </p>
			</div>
			<!-- MENU DE DROITE -->
			<div id="menu_droite">
				<div id="menu_droite1">
					<img src="recherche.jpg" alt="" />
				</div>
				<div id="menu_droite2">
					<img src="espace_membre.jpg" alt="" />
				</div>
				<div id="menu_droite3">
					<img src="horaires.jpg" alt="" />
				</div>
				<div id="menu_droite4">
					<img src="tuteurs.jpg" alt="" />
				</div>
			</div>
			<!-- PIED DE PAGE -->
			<div id="pied_de_page">
 
			</div>
		</div>
	</body>
</html>

Merci d'avance de prendre du temps pour mon soucis !

Problème corps image de fond

CSS

Vue hybride

Discussions similaires

Partager

Partager