JQuery, .css() et multiples background ..marche pas ?

Bonjour,

Je coince sur une manipulation css3 jQuery.
Je prototype une page avec des fonds complexes (plusieurs couches png, tant pis pour les vieux IE).
J'ai une image de fond qui doit être en partie hors de mon containeur centré dimensionné.

Je l'ai donc mise en background du containeur parent qui prend 100% mais qui contient déja un dégradé.

Ca donne ceci dans la css, et c'est le lézard que je veut positionner dynamiquement qqsoit la largeur de la fenêtre du navigateur, afin qu'il soit toujours placé pareil (avec .resize() non mis dans cette exemple)

#container {

background-color: transparent  ;
background-image:  url(../images/lezard.png), url(../images/fond-body3.png); 
background-position: 0% 40px, center 114px;
background-repeat:no-repeat, repeat-x;
}

J'ai beau tourner le pb dans tous les sens la construction de la chaine de paramètres css est bonne (un alert de trace est ok) je me demande si jQuery et .css() gère ca ...?
Aucune erreur console, mais aucune action non plus.

Une des versions testée:

//gestion de la position dynamique du fond lézard de #container	 
set_PosLezard = function(){
W_Cin = $('#container-in').width();
W_C = $('#container').width();
Pos_lezard = (W_C - W_Cin) / 2 + 'px';
var back_ground = '"' + Pos_lezard + ' 40px, center 114px' +'"';
var cssObj = {
      'background-position' : back_ground
    };
$('#container').css(cssObj);
//alert ('set_PosLezard : ' + Pos_lezard +  '  background-position : ' + back_ground);
}

la fonction est déjà appellée au chargement dsn la readyfunction, on verra pour le resize() + tard.

heu ...au secours ?
Merci
Modifié par elz64 (10 Apr 2012 - 16:55)

Salut,

Il s'agit moins d'un problème lié à jQuery ou au JavaScript que d'un problème lié aux CSS.

Victor BRITO a écrit :
Salut,

Il s'agit moins d'un problème lié à jQuery ou au JavaScript que d'un problème lié aux CSS.

Heu.. que veux-tu dire ?

Ds lefichier css c'est ok et ca s'applique. je répète que le passage par .css() ne se traduit pas par la moindre action dans le dom, sans pour autant déclencher la moindre erreur.
Modifié par elz64 (10 Apr 2012 - 17:03)

Eventuellement, t'as une démo ?

pas de demo accessible because maquette avec ip redirigée dans mon fichier hosts local.

le pb ne vient pas de l'usage de multiples fonds.
J'ai modifié pour revenir en mono background avec un div/fond.
même souci.
J'ai tenté je ne sais plus combien de syntaxes avec la méthode .css() ..
si je balance des paramètres en dur pour tester, ça marche. Dès que c'est paramétré et la chaine de paramètres est construite dans le code, ça ne marche plus (sans erreur pour autant)

une trace écrit la chaine que j'attends et on voit ds le dom apparaitre un style="" (rien entre les guillemets comm si ma var bg était vide, alors que le prepend de trace dit le contraire).

set_PosLezard = function(){
W_Cin = $('#container-in').width();
W_C = $('#container').width();
Pos_lezard = (W_C - W_Cin) / 2 + 'px';
//var back_ground = '"' + Pos_lezard + ' 40px, center 114px' +'"';
 bg = "'" + Pos_lezard + " 40px" + "'";
$('#container').css({'backgroundPosition': bg });
//alert ('set_PosLezard : ' + Pos_lezard +  '  background-position : ' + back_ground);
}

et les appels ds le readyfunction

set_PosLezard(); // positionnement initial
	$(window).resize(function() {
		//alert ('set_PosLezard : ' + Pos_lezard );
	  // si le browser est redimensionné on calcul la bonne pos du lézard
	  set_PosLezard();
	$('#page').prepend(" - " + bg); // ca ca sort ce qu on attend !!
	});

le prepend sort par exemple '252px 40px' (quotes inclus), donc c'est bon non ?

Quand je disais "démo" je pensais à jsfiddle.

Bon sinon, j'ai fais un petit test parce qu'un truc m'étonnait :

// bad
bg = "'" + Pos_lezard + " 40px" + "'";

// good
bg = Pos_lezard + " 40px";

Ton soucis c'est les quotes que tu rajoutes.

....

Ah ..ben oui.

Fait chmir, presque une journée à tourner en rond pour une pareille Co....

Merci