caler une image en Background

Bonjour à tous,

je me permet de venir vers vous car j'ai un soucis avec mon portfolio que je suis en train de développer ( http://www.yoannbazoge.com/jquery-on/ ). J'ai trouver une source sur le net pour avoir un base sous forme de slide, le soucis c'est que sur cette base je n'arrive pas à mettre comme je souhaite le fond. J'ai quelques notions de CSS mais là je bloque. En gros je souhaiterai que mon image de fond, se centre suivant la hauteur de l'écran des personnes. Hors là l'image se cale juste en haut de la fenêtre du navigateur. Si vous modifiez dans firebug " top left " par " center left " vous verrez que l'image met son centre en haut du navigateur. J'aurai donc voulut savoir si vous aviez une idée. Sachant que je souhaiterai que l'image de fond ne soit pas fixe mais slide avec le contenu.

Merci beaucoup d'avance.

Yoann

As-tu essayé la propriété background-position?

Citation:

'background-position'
Valeur : [ [<pourcentage > | <longueur> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Initiale : 0% 0%
S'applique à : ceux des éléments de type bloc et ceux remplacés
Héritée : non
Pourcentage : se rapporte à la taille de la boîte elle-même
Médias : visuel

Elle pourrait peut-être bien t'aider. Non ?

merci à toi troumad.

J'ai essayé en rajoutant un background-position mais le problème, c'est que je me retrouve avec ces valeurs :

background-position: 0% 15%;

N'ayant qu'un seul écran sous la main, je me demande si le 15% (pour centre en hauteur mon image de fond) ne risque pas de créer des conflits et de ne pas être centrée sur certaines résolution ?

Merci d'avance.

Bonjour,

tu as essayé d'utiliser les constantes ?

Code:

background-position: left center;

Oui j'ai essayé, mais en fait l'image met son centre, en haut de ma fenêtre navigateur (essaye avec firebug si tu l'as, tu verras)

Merci quand même ! :)

Si tu mets une bordure à BODY, tu verras qu'en fait le centrage est fait correctement mais que BODY a une hauteur nulle.

si tu ajoutes :

Code:

html, body {height: 100%;}

Ça devrait aller mieux.

devyan

Je viens de mettre une height : 100% et comme tu peux le voir ici >>> http://www.yoannbazoge.com/jquery-on/

ça ne change pas grand chose :(

Bonjour,

le lien fourni est mort, la page est en 404

voici le lien

www.yoannbazoge.com/test

Désolé je l'avais changé, mais du coup voila j'ai bidouillé le truc et il est en 15% comme dit précédemment.

Étrange, lorsque je fais le test en modifiant ton code source cela fonctionne... :?

Code:

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Horizontal Scrolling Website With jQuery</title>

<style>
html{
height: 100%;
}


body {
text-align:left;
color:#666;
font-size:14px;
font-family:georgia, 'time new romans', serif;
padding:0;
margin: 0 auto;
background: url(http://www.yoannbazoge.com/test/images/bg.jpg) no-repeat;
/*background-position: 0% 18%;*/
background-position: left center;
overflow: hidden;
border:thin red solid;
height:100%;
}



a {
color: #ffffff;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}

a:visited {
color: #aaaaaa;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}

a:hover {
color: ffffff;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}

h1 {
width: 600px;
border: none;
padding: 35px 0 0 0;
}

h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}

h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}

p {
color:#fff;
font-size: 10px;
line-height: 10px;
font-family: verdana, helvetica, sans-serif;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}

img {
border:none;
}

#header {
width: 360px;
float: left;
margin: 0 15px 0 0;
padding: 0;
}

#menu {
background: #000000;
position:fixed;
bottom:0;
left: 0;
border:none;
clear: both;
float: left;
text-align:center;
font-family: helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
margin: 0;
padding: 18px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .25;
width:100%;
}

#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#menu ul li{
list-style-type: none;
color: #FFF;
display: inline;
margin: 0;
padding: 0 10px 0 10px;
}

#menu ul li a{
text-decoration: none;
list-style-type: none;
color: #FFF;
display: inline;
margin: 0;
padding: 0;
}

#menu ul li a:hover{
text-decoration: none;
list-style-type: none;
color: #FFF;
display: inline;
margin: 0;
padding: 0;
}

#container {
position: absolute;
top: 120px; left: 0;
width: 11000px;
margin: 0;
padding: 0;
}



.box_home {
background:none;
border:none;
width: 3000px;
float: left;
line-height: 22px;
margin:0;
padding:0;
}

.box_home p {
color:#aaaaaa;
font-size: 10px;
line-height:24px;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}



.box_infos {
background:none;
border:none;
width: 2940px;
float: left;
line-height: 22px;
margin:0;
padding: 5px 30px 30px 30px;
}

.box_infos p {
color:#000;
font-size: 10px;
line-height:15px;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}



.box_portfolio {
background:none;
border:none;
width: 2940px;
float: left;
line-height: 22px;
margin:0;
padding: 5px 30px 30px 30px;
}

.box_portfolio p {
color:#FFF;
font-size: 10px;
line-height:15px;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}



.box_contact {
background:none;
border:none;
width: 940px;
float: left;
line-height: 22px;
margin:0;
padding: 5px 30px 30px 30px;
}

.box_contact p {
color:#FFF;
font-size: 10px;
line-height:15px;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}
</style>
		<script type='text/javascript' 

src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
		<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>

		<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>

	
	
	
		<script type="text/javascript">
		$(document).ready(function () {
			$.localScroll.defaults.axis = 'x';
			$.localScroll();
		});
		</script>
		
		
	
</head>
<body>
	<div id="menu">
		<ul>
			<li><a href="#home">Home</a></li>

			<li><a href="#infos">Infos</a></li>
			<li><a href="#portfolio">Portfolio</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
        </div>

	
	<div id="container">
    		<div id="home" class="box_home">

			<h2><a name="home"></a></h2>
		</div>
    
		<div id="infos" class="box_infos">
			<h2><a name="infos">Infos</a></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus 

quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt 

gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt 

arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam 

hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc 

mattis eleifend dolor at adipiscing.</p>
		</div>
		
		<div id="portfolio" class="box_portfolio">
			<h2><a name="portfolio">Portfolio</a></h2>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus 

quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt 

gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt 

arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam 

hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc 

mattis eleifend dolor at adipiscing.</p>
		</div>

		<div id="contact" class="box_contact">
			<h2><a name="contact">Contact</a></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus 

quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt 

gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt 

arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam 

hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc 

mattis eleifend dolor at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis 

eleifend dolor at adipiscing.</p>
		</div>

	</div>
</body>
</html>

Ah mais tu précises également le 100% dans html ?

Il faut que je précise html dans la feuille de style ?

Oui il faut html ET body à 100%

Citation:

Envoyé par devyan

Si tu mets une bordure à BODY, tu verras qu'en fait le centrage est fait correctement mais que BODY a une hauteur nulle.

si tu ajoutes :

Code:

html, body {height: 100%;}

Ça devrait aller mieux.

devyan

donc à l'instart de la balise body, je mets 100% dans la feuille de style pour la balise html si j'ai bien saisi ?

Bonjour,

Alors... Comment te dire ? ...

O... U... I... !

:mrgreen: