[Résolu] Background multiples

Hello!

J'ai un petit problème avec un background multiple.

Sur une de mes page j'utilise 2 background superposé sur le body. Donc j'ai un background en répétition que j'utilise partout sur le site, et sur 2 pages j'utilise une 2e background (une grand image) qui apparaît sur le premier et qui "fusionne" dans le bas si la page est plus haut que l'image.

Or, sous Chrome, ça ne fonctionne pas. Ce dernier ne load que l'image en répétition, pas la grande...

CSS main

body{ 
	background: url(../interface/Background_XCEL_2013.png) center repeat #fff;
	font-family: Verdana, Geneva, sans-serif;
	margin: 0 auto;
	padding: 0 0 1em 0;
	font-size: 1em;
	line-height: 1.4;
	color: #000;
}

CSS pour page spécifique:

@media screen and (min-width: 970px) {
	body{
		background: url(/interface/Montage_Surf_Ski_Orange.jpg) no-repeat top center/ 150%, url(/interface/background.png) repeat;
	}
}
@media screen and (max-width: 969px){
	header{
		background: url(/interface/background_sport.png) no-repeat center 30%/ cover;
	}
}
@media screen and (min-width: 1300px) {
	body{
		background: url(/interface/background_sport.png) no-repeat top center/ 130%, url(/interface/background.png) repeat;
	}
}
@media screen and (min-width: 1700px) {
	body{
		background: url(/interface/background_sport.png) no-repeat top center/ 100%, url(/interface/background.png) repeat;
	}
}

J'ai utilisé cette technique pour mon site dans une vie antérieure. Ça donnait ceci :

body {
    color: #000;
    /*pour tous les navigateurs :*/
    background: #ddd url(../img/bruit.png);
    background-color: #ddd;
    /*pour les navigateurs capables de supporter les backgrounds multiples :*/
    background-image: url(../img/beatus-paon-serpent2.png),
                      url(../img/bruit.png);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

Vous êtes peut-être obligé de rappeler les 2 images pour chaque règles media queries... À tester.
Modifié par Olivier C (21 May 2013 - 22:25)

Merci!
Effectivement séparé les règles, je n'y avait pas pensé. Maintenant ça fonctionne sous Chrome, mais je viens de voir que Safari non plus d'affiche pas la grande image...
en fait il y a beaucoup d'image que Safari n'affiche pas et je ne sais pas pourquoi...

En fait, si l'on appelle pas les images ensemble dans la même règle, le css ne prend que la dernière règle en écrasant l'autre. Comme il se comporte d'habitude en fait.

Pour Safari, je ne voie pas. Il faudrait un exemple en ligne...

Bon après revérification, les 2 pages mentionné plus haut son correct sous Safari.

Pour Safari il s'agit de mes autre page "régulière" et ça n'a rien à voir avec un background multiple...
Enfin bon, je posterai un nouveau message si je ne parvient pas à régler le problème.

Salut,

En ce qui concerne les règles d'écriture, en cas d'utilisation de la propriété raccourcie background, la couleur d'arrière-plan (unique) doit être déclarée en même temps que le dernier arrière-plan (cf. spec). Ce qui donne, en reprenant le code d'Olivier C :

body {
    color: #000;
    /*pour tous les navigateurs :*/
    background: #ddd url(../img/bruit.png);
    /*pour les navigateurs capables de supporter les backgrounds multiples :*/
    background: url(../img/beatus-paon-serpent2.png) right bottom no-repeat,
                url(../img/bruit.png) left top #ddd;
}