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.

**Torgar** · 07/11/2012, 09h40

Salut,

Allez, ne te décourage pas !

Aurais-tu un exemple en ligne s'il te plait ? J'avoue ne pas bien voir où se situe le problème sur ta capture d'écran.
Au pire, nous fournir les images de ton arrière-plan afin de reconstituer ta page avec le code déjà posté.

Merci.

**Masamune56** · 07/11/2012, 15h24

Merci pour le remontant mais je ne comprends pas:

Envoyé par Torgar

J'avoue ne pas bien voir où se situe le problème sur ta capture d'écran.

Comment ca? mes captures sont trop petites? ne s'affichent pas sur votre PC?
le problême se voit en comparant le haut des 2 images.

Quant aux liens des 4 backgrounds ils étaient déjà intégrés au code du post d'origine depuis le début... hébergés sur mon googledocs.

Je n'ai pas de version en ligne du site vu que je le développe en local sur mon ordi. Je ne le mettrai en ligne qu'une fois terminé, logique... (je ne vais pas m'amuser à tester chaque modification de mon code en uploadant mon html à chaque fois lol). et hors de question d'utiliser un server local: impossible d'installer quoique ce soit sur ordi du boulot.

EDIT: Je vois dans votre signature un article sur les bordures CSS3, le paragraphe IV m'a intéressé mais malheureusement ne réponds pas à mon problème de bordure dégradée.

EDIT2: honnêtement l'idée même de repeat-y une bande extraite du background-bottom donne une résultat plutot moche. Donc si vous avez une idée pour "relier" les backgrounds supérieurs avec celui du footer de façon plus "continue/propre", je suis open aux suggestions.

**Torgar** · 07/11/2012, 15h34

En effet, ton image est trop petite, d'autant plus que tu mets du rouge sur noir, ce qui n'aide pas niveau contraste.

Je me doute que tu ne veuilles pas faire d'upload pour tester chaque modifications et je le comprends très bien, moi-même faisant pareil ainsi que beaucoup d'autre ici. En revanche, mettre une seule page d'exemple n’équivaut pas à déplacer une montagne et nous aurait permis d'identifier plus rapidement ton problème. Voila le but de ma démarche.

**Masamune56** · 07/11/2012, 15h40

Envoyé par Torgar

En effet, ton image est trop petite, d'autant plus que tu mets du rouge sur noir, ce qui n'aide pas niveau contraste.

Ok j'ai refait les captures, grossies 5x: la première est le résultat souhaité, la seconde est le résultat obtenu après un repeat-y comme indiqué dans le code du post d'origine, avec les bordures qui dépassent allègrement et entourées en rouge bien gras (CE QUE JE NE VEUT PAS).
Si malgré ca ce n'est toujours pas compréhensible......... je part me coucher lol.

Envoyé par Torgar

Je me doute que tu ne veuilles pas faire d'upload pour tester chaque modifications et je le comprends très bien, moi-même faisant pareil ainsi que beaucoup d'autre ici. En revanche, mettre une seule page d'exemple n’équivaut pas à déplacer une montagne et nous aurait permis d'identifier plus rapidement ton problème. Voila le but de ma démarche.

Ok pigé, le hic est que je n'ai pas encore cherché d'hébergeur donc bon là dans l'immédiat je ne sait vraiment pas où je pourrait l'uploader.

**NoSmoking** · 07/11/2012, 22h10

Je dois avoir la vue qui baisse car je n'avais pas vu ce détail, il est vrai qu'en règle général pour mettre en évidence il est préférable de mettre du contraste mais bon...

Concernant ton soucis ton salut aurait pu venir de la propriété background-repeat en lui mettant comme valeur space, testes sous Chrome/Safari, cela fonctionne...mais pas sous FireFox ( bug 548372), pas regardé sur IE.

Je pense que la meilleur solution que tu puisses trouver est de mettre ton fond, avec zone transparente, dans une DIV à part.

Ah! le CSS3 balbutie encore un peu

Multiple background et repeat ?

CSS

Discussions similaires

Partager

Partager