Id image mutlibackground

Bonjour à tous,

J'aurai juste une petite question qui me torture...

Peut-on et/ou comment attribuer un id à chaque image présentes en background en CSS 3 ?

J'ai par exemple :


dans ma feuille de style :

#B2
{
	width: 980px;
	height: auto;
	float: left;
	display: block;
	margin: 0;
	padding-top: 10px;
	background: url(../images/gauche.jpg) no-repeat bottom left, url(../images/droite.jpg) no-repeat bottom right;
}

dans mon index.php :

juste la div <div id="B2"></div>

Mon souci est que j'aimerais que ces deux images s'auto agrandissent dans la hauteur en fonction du contenu, alignées en bottom, et que j'ai besoin d'utiliser jQuery pour des effets de rollover et de lien.

Les images font chacune -> w: 200px et h: 1280px

J'ai essayé en les mettant directement dans l'index plutôt que dans la feuille de style, ce qui règle mon souci de rollover et de lien mais du coup, les images s'affichent dans leur hauteur maxi...mm en mettant height en auto.

Là je sèche, ça fait plusieurs jours que je suis dessus et je désespère..
Ca doit sûrement etre simple mais j'ai un trou... lol !

Vos conseils seront les bienvenus.
Merci à vous
@+++
Modifié par valols (06 Dec 2010 - 16:41)

bonsoir,

background-size: pourrait servir, a tester.

Bonsoir et merci pour cette réponse.
Je vais tester ça et reviens pour dire si c'est ok
@+++

Hello,

Bon alors j'ai testé mais ça marche pô...

En faisant :

dans l'index :

<div id="B2"><a href="http://le lien">
<img id="gauche" src="../templates/images/gauche.jpg" style="background-size:100%;" /></a>

<div id="B2D"><a href="http://www.lelien">
<img id="droite" src="../templates/images/droite.jpg" style="background-size:100%;" /></a>

  <!--debut corps-->
    <div id="corps1">
   .....
    </div>
  <!--fin corps1-->


</div>
<!--fin B2D-->

</div>
<!--fin B2-->

testé en 100 % et en auto.


et dans CSS :

#B2
{
	width: 980px;
	height: auto;
	float: left;
	display: block;
	margin: 0;
	padding-top: 10px;
}

#B2 img
{
	width: 200px;
	float: left;
	display: block;
        margin: 0;
	background-position: bottom left;
	background-repeat: no-repeat;
	border:none;
}

#B2D
{
	width: 780px;
	height: auto;
	float: right;
	display: block;
	margin-top: -10px;
	padding-top: 0;
}

#B2D img
{
	width: 200px;
	float: right;
	display: block;
        margin: 0;
	background-position: bottom right;
	background-repeat: no-repeat;
	border:none;
}

Puis essayé aussi avec le background-size dans CSS et donc supprimé dans l'index...
Mais marche pas non plus !
Hummm ... embêtant !
J'ai toujours les images en pleine taille alors que j'aimerais quelles s'adaptent à la hauteur du contenu.

Si vous avez d'autres pistes, je suis preneuse
Merci
@ +++
Modifié par valols (07 Dec 2010 - 09:57)