[RÉGLÉ] Probleme de placement avec une image dans un background multi-images

[Visiteur]

Slt

Je suis en train de refaire le site d'un pote. Pour le fond des texte je doit mettre un cahier a spirale, comme sur son site actuel : www.lescimesdegaia.com. J'ai fait un background CSS avec plusieurs images :

#rt-main {
	background-image: url(../../../images/cahier-haut.png), url(../../../images/cahier-centre.png), url(../../../images/cahier-bas.png);
	background-position: center top, 0 0, center bottom ;
	background-repeat: no-repeat, repeat-y, no-repeat ;
}

Le probleme c'est que l'image cahier-bas.png est en haut sous l'image cahier-haut.png . Par contre si je supprime du CSS l'image cahier-centre.png, l'image cahier-bas.png est bien en bas.

Je vois pas d'ou ca peut venir. Je ne peux pas vous donner de lien vers le site en construction, car je suis en local avec Uwamp.

Merci d'avance pour votre aide.

• joomla 3.3.6
• Gantry 4.1.26

[chipie24]

Re : Probleme de placement avec une image dans un background multi-images

Salut,
A tout hasard, ce ne serais pas le repeat-y de l'image centrale qui fait recouvrir celle du bas?

#rt-main {
	background-image: url(../../../images/cahier-haut.png), url(../../../images/cahier-bas.png), url(../../../images/cahier-centre.png);
	background-position: center top, center bottom, 0 0 ;
	background-repeat: no-repeat, no-repeat, repeat-y;
}

[lomart]

Re : Probleme de placement avec une image dans un background multi-images

Bonjour,

Le code css me semble bon. J'aurais mis center top au lieu de 0 0 pour l'image centrale

Par contre cette structure ne va pas supporter le responsive du template. Il vaudrait mieux gérer les fonds dans les blocs concernés avec au besoin des médiaqueries

[Visiteur]

Re : Probleme de placement avec une image dans un background multi-images

Salut,
A tout hasard, ce ne serais pas le repeat-y de l'image centrale qui fait recouvrir celle du bas?

Bonne question

Le code css me semble bon. J'aurais mis center top au lieu de 0 0 pour l'image centrale

J'ai fait la modif. Pourquoi c'est mieux avec center top plutot que 0 0 ?

Par contre cette structure ne va pas supporter le responsive du template. Il vaudrait mieux gérer les fonds dans les blocs concernés avec au besoin des médiaqueries

Je viens de tester et c'est vrais que c'est pas top comme ca. Je me retrouve avec les elements de la partie de gauche (celle qui est marron fonce et en position SidebarA), sur la page quadrillee et le texte qui est en vert clair ne se voit plus. Donc, pour suivre ton conseil, il vaudrait mieux que je mette la couverture du cahier (qui est donc en marron fonce) dans le bloc contenant la position SideBarA (position gauche) et la feuille quadrillee dans le bloc contenant le Main body.

[lomart]

Re : Probleme de placement avec une image dans un background multi-images

Pourquoi c'est mieux avec center top plutot que 0 0 ?

Ce pourrait être center 0
il faut center horizontalement l'image à répéter, comme le top et le bottom d'ailleurs

Donc, pour suivre ton conseil, il vaudrait mieux que je mette la couverture du cahier (qui est donc en marron fonce) dans le bloc contenant la position SideBarA (position gauche) et la feuille quadrillee dans le bloc contenant le Main body.

et le top dans le header et le bottom dans le footer

[Visiteur]

Re : Probleme de placement avec une image dans un background multi-images

Merci pour les infos et l'aide. Je vais voir tout ca.

Chipie24, je repensais a ta piste, ca ne peut pas etre ca. Si c'etait le repeat-y de l'image cahier-centre.png (donc le fait qu'elle soit recopier vers le bas) qui recouvre cahier-bas.png, celle-ci serait en bas, et donc recouverte par cahier-centre.png. Alors que dans mon probleme cahier-bas.png est en haut et recouverte par cahier-haut.png. Je suis clair dans mon explication ?

[chipie24]

Re : Probleme de placement avec une image dans un background multi-images

Bonjour,

Tu ne précses pas ce que fait l'image centrale tandis que en haut, l'image du bas est recouverte par l'image du haut

As tu essayé mon code, il solutionnerait au moins la partie recouvrement je suppose

Avec le tien, j'ai testé et j'ai bien l'image du bas en bas et recouverte par l'image centrale donc j'avoue n'avoir pas d'explication pour quelle raison elle est en haut avec toi sauf peut etre que ton center bottom n'est pas pris en compte
A moins que je me trompe, il semblerait que quand trois backgrounds sont spécifiés le premier est au dessus, puis le deuxieme en dessous, ainsi de suite

[Visiteur]

Re : Probleme de placement avec une image dans un background multi-images

J'avais meme pas fait gaffe que le code que tu avais laisse dans on message etait modifie . Je l'ai essayer et c'est pareil. Mais de toute facon je vais faire comme a conseille lomart. Par rapport a l'ordre, j'avais trouve comment mettre plusieurs images dans un background (car je ne connaissais pas ce systeme) sur alsaceation. Merci quant meme pour ton aide et ta piste

[chipie24]

Re : Probleme de placement avec une image dans un background multi-images

Oui, c'est rare et je ne me rappele pas avoir jamais vu trois backgrounds, mais c'est trés interessant ce systeme. En tous cas le code que tu as posté parait bon, si l'image est en haut ca ne vient pas de là. Bon courage