2 background-image dans une div

[sff]

Bonjour,

J'ai tenté de mettre 2 background-image dans une div. J'ai bien les 2 images comme prévu dedans, sauf que la première respecte la no-repeat et le position center et ca je ne veux pas.

Comment faire ?

<div style="width:576px; height:448px; background-image:url(images/carte/back_map.png); background-image:url(images/carte/fonds/2.jpg); background-position:center; background-repeat:no-repeat"></div>

Merci

 

[spout]

2 background en CSS, ce n'est surement pas encore fort supporté (CSS3 si j'me souviens bien).
Et si tu veux les positionner indépendament, il faut passer le position center et le no-repeat directement par le raccourci "background".
Dans ton exemple les 2 seront pris en compte.

http://www.w3schools.com/css/css_background.asp => Background - Shorthand property

 

[Dharius]

Salut,

Je pense que ça marche pas du tout d'appliquer 2 fois le même "intitulé" de style dans certains navigateurs.
le mieux est peux-être simplement d'imbriquer 2 div...

 

[NxtGen]

Bonjour,

Dharius a raison.
Normalement en css, si il y a deux valeurs pour un même style, c'est la dernière qui est prise en compte.
Par exemple si tu fais :

.text {
     color: red;
     color: blue;
     }

ton texte sera bleu, et pas bleu et rouge
Maintenant, peut être qu'en CSS3 ceci sera pris en compte, mais en tout cas pour l'instant, la plupart des navigateur ne prendront en compte que la deuxième valeur.

Et pour ton problème de position du background, il faut faire :

background: url('images/carte/back_map.png') no-repeat 50% 50%;

 

[bproductiv]

http://www.css3.info/preview/multiple-backgrounds/

 

[gg00xiv]

Cela va considérablement alléger le code CSS surtout pour ce qui est des "boites" à bords arrondis

 

[spout]

Cela va considérablement alléger le code CSS surtout pour ce qui est des "boites" à bords arrondis

Plus besoin d'images, les bords arrondis sont prévus en CSS3 avec border-radius.

 

[gg00xiv]

Oui, mais je pensais surtout (sans l'avoir écrit au temps pour moi) à des arrondis un peu design créés sous photoshop ou autre ^^