Background multiple

bonjour

j'essaie la nouvelle fonction de css3 background multiple les images ne se superpose pas



#rt-showcase .rt-container
{
height: 170px;
display: inline-block;
margin: 1em;
padding: 1em;
background-image: url(../images/fond.jpg), url(../images/logo.png);
background-repeat: no-repeat ;
background-position: center center, left top ;
}


salutation
philippe

en inversant la disposition des images ca marche

mais comment positionner les images de facon précise
la propriété background-position n'est pas assez précise

background-position: center bottom, left top;


salutation philippe
Modifié par philippe3441 (29 Jun 2012 - 14:57)

philippe3441 a écrit :
en inversant la disposition des images ca marche

mais comment positionner les images de facon précise
la propriété background-position n'est pas assez précise

background-position: center bottom, left top;


salutation philippe

Pourquoi ne pas utiliser le positionnement par pourcentage qui offre une plus grande souplesse.. ?

philippe3441 a écrit :
mais comment positionner les images de facon précise

En CSS 2.1 tu peux:
- centrer une image de fond verticalement et horizontalement;
- utiliser des pourcentages pour la placer à peu près n'importe où (attention, les pourcentages fonctionnent d'une manière assez spécifique avec background-position);
- utiliser les mots-clés left, top, right et bottom pour placer les bords de l'image de fond sur certains bords de l'élément;
- placer l'image de fond à une position précise par rapport au coin haut gauche en utilisant des coordonnées exprimées dans des unités absolues ou relatives (en px ou en em par exemple).

En CSS3 tu peux aussi:
- placer l'image de fond à une position précise (via des px, em, rem ou autre unité) par rapport à n'importe quel coin de l'élément (par exemple: background-position: right 50px bottom -20px).

Pour la syntaxe CSS3, elle marche dans Firefox (15) mais pas dans Chrome (20). Pas testé ailleurs.