Multiple background et repeat ?

**Masamune56** · 02/11/2012, 15h14

Bonjour,

En lisant le forum j'ai trouvé comment mettre mes 4 images constituant mon background dans un seul conteneur, je tape donc le code suivant:

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
<!doctype html>
<html>
<head>
	<style>
		body {background-color: black; color:white}
		.multipleBackground {
			border:2px solid green;
			margin: auto;
			padding: 100px 0 150px;
			width:960px;
			background:
				url(./Images/BG_MainTitle.png) center 0 no-repeat,
				url(./Images/BG_MainContainerTop.jpg) center 91px no-repeat,
				url(./Images/BG_MainContainerMiddle.jpg) center 595px no-repeat,
				url(./Images/BG_MainContainerBottom.jpg) center bottom no-repeat;}
				/*url(https://lh5.googleusercontent.com/-UUpp2afMCac/UJPCdgpw3pI/AAAAAAAABK8/Jd5O9KpOymY/s885/BG_MainTitle.png) center 0 no-repeat,
				url(https://lh5.googleusercontent.com/-4gEIg4SEnZM/UJPCdKtc_kI/AAAAAAAABLE/hdamuDclMbE/s889/BG_MainContainerTop.jpg) center 91px no-repeat,
				url(https://lh4.googleusercontent.com/-ZGxQ2v-lcVk/UJPCcwFmlCI/AAAAAAAABK0/ssh7o30yGrk/s959/BG_MainContainerMiddle.jpg) center 595px repeat-y,
				url(https://lh5.googleusercontent.com/-wnikg72rZTM/UJPCc-bN4oI/AAAAAAAABLA/vS2BLT-fjCE/s887/BG_MainContainerBottom.jpg) center bottom no-repeat;}*/
		#navbar {
			height:30px;
			border:2px solid blue}
		#content {
			margin: 90px 60px 0;
			border:2px solid white}
	</style>
</head>
<body>
	<div class="multipleBackground">
		<div id="navbar">
		</div>
		<div id="content">
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		bla<br/>
		</div>
	</div>
</body>
</html>

Les bordures colorées sont temporaires. Tout marche comme je le voulait, c centré, le background de fond se "déplace" bien avec la longueur du contenu tout va bien .... sauf le milieu.

Le milieu est une simple bande extraite du background bottom que je pensait faire un repeat-y dans le code mais...
... le repeat-y me copie cette bande TOUT du long du haut de la fenêtre jusqu'en bas ! alors que je ne veut qu'il me remplisse juste le milieu...

et ca, ce n'est pas dans la FAQ du multibackground.

quelqu'un aurait-il une solution svp ?

Multiple background et repeat ?

CSS

Mode arborescent

Discussions similaires

Partager

Partager