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 ?

**Masamune56** · 05/11/2012, 13h01

J'ai essayé une variante : l'idée serait un hack en mettant le fond de milieu dans un div placé en arrière-plan par rapport au div principal.

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
<!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_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;}*/
		.MiddleBG {
			border:2px solid Magenta;
			margin: 595px auto 150px;
			width:960px;
			z-index:-1;
			background: url(./Images/BG_MainContainerMiddle.jpg) center repeat-y
		}
		#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>
	<div class="MiddleBG"/>
</body>
</html>

Mais ca n'a pas l'air de marcher non plus... (et c'est loin d'être propre comparé à un div unique)

Sinon l'autre idée serait de placer le fond du milieu dans un border-image, mais je n'y arrive pas non plus...

**NoSmoking** · 05/11/2012, 19h45

Bonjour,

... 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...

Attention : l'ordre de déclaration des images de fond est TRES IMPORTANTE, la première déclarée est placée sur le dessus, la suivante dessous et ainsi de suite.

Dans ton cas l'image du bottom devrait être déclarée avant celle du centre.

Toutes les infos

Layering Multiple Background Images

**Masamune56** · 05/11/2012, 22h31

Je sais, le problème n'est pas là.

Les backgrounds de top et bottom ont des zones transparentes qui devraient donc afficher le noir du background-color du body.
Le hic c'est que le repeat-y du background Middle fait apparaître la bande répétée derrière ces zones transparentes, et c'est TRES moche (cf. image jointe).

Je cherche donc à limiter la répétition de cette bande mais comment ??!

EDIT: j'ai réussi à remplacer la zone transparente du background-bottom par noir donc ca masque les bandes répétées du background Middle en bas du div. Par contre peut pas le faire sur le background-top car ca bousille l'image...)

**NoSmoking** · 06/11/2012, 19h10

c'est TRES moche (cf. image jointe).

Oui, bon, ma foi...attendu que je ne sais pas ce que tu souhaites réellement comme rendu je préfère en rester là.

**Masamune56** · 07/11/2012, 09h03

Envoyé par NoSmoking

Oui, bon, ma foi...attendu que je ne sais pas ce que tu souhaites réellement comme rendu je préfère en rester là.

Ma foi... ca fait 4 jours que je me remet en cause sans arrêt pour comprendre en quoi mon message (idem pour celui de bordure dégradé) n'obtient aucune réponse... sans trouver ce qui "manque" aux explications.

Pourtant j'ai joint 2 messages avec explications reformulées et images jointes montrant clairement le gros trou vide de la première image rempli par une bande en repeat-y dans la seconde image. Ca c'est ce que je souhaite.
MAIS la seconde image montre que cette bande se répète "trop loin" et ca se voit en haut de la seconde image. CA je n'en veut pas. Comment faire ?

Dites moi ce que VOUS ne comprenez pas et j'essaierai d'adapter mes explications, svp.

Là actuellement je m'en suis tiré avec une solution temporaire utilisant 6 divs, 1 règle javascript pour gérer la hauteur changante et of course un CSS bien lourd qui va avec...j'aimerait apprendre à faire cela plus proprement, et cela ferait un bel ajout pour votre faq multi-background.

Multiple background et repeat ?

CSS

Vue hybride

Discussions similaires

Partager

Partager