Problèmes positionnement Chrome et Opera...

Bonjour je cherche à positionner une image d'ombre dans une autre (image de background) cela marche sur ff safarie mais pas sur chrome et opéra......
Voilà mon code et qq capture d'écrans:
Html:

<div id="background">
        <img src="mon-image.jpeg" alt=""/>
         <div id="shadow-transition"></div>
</div>

le css:

#background img{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    float: left;
    position: absolute;
}
#shadow-transition{
    background:  url(images/design-shadow.png) repeat-x;
    height: 49px; 
    width: 100%;
	z-index: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
    position: absolute;
}

Firefox:

Opera:

Chrome:

Si qqn à une solution

bonsoir,

est ce que #background est en position:relative; ?

est ce que background à une hauteur ?

est ce que top:0; au lieu de bottom:0; sur #shadow-transition resout le probleme ?

est ce que float sert a quelque chose sur #background img ?

<hs>est ce que par hasard un vertical-align top ou bottom sur #background img élimine cette différence ?</hs>

Cordialement,
GC

bonsoir,
#background possède la position par défaut et il prend la hauteur de l'image qu'il contient (script jquery qui met les images en pleine écran.
Top: 0 ramène l'ombre en haut... c'est pas trop mon objectif
Le float sert à rien
et le vertical align ne marche pas......
^^

En fait, c'est juste un problème d'actualisation pcq j'ai beau tout changer dans mon css sa ne change rien.

okay ,

L'exposé de ton probleme est incomplet:

dimension de l'image et découverte que tu utilise un plugin jquery pour gérer un ombrage .

un exemple en ligne aiderait a voir et comprendre defaut et effet voulu.

++

Dsl je n'ai pas d'exemple en ligne pour l'instant, en fait c'est un thème wordpress ou depuis ce dernier on peut choisir une image de background qui va s'adapter à la taille de l'écran et ensuite je veux placer une ombre en bas pour donner du relief

okay, ça me parle plus beaucoup plus comme ça .

si ton image est en background, tu peut faire l'ombrage au dessus via css.

par exemple , test et applique ce css dans une page (x)html(5) vide.

html{height:100%;}
body {min-height:100%;margin:0;padding:0;}
html {
padding:0;margin:0;
box-shadow:inset 0 -20px  20px -10px red; 
}

je met a part le code CSS pour mettre en fond une image

html {background:url(http://lorempixel.com/400/200/) ;
background-size: 100% 100%;}

L'ombrage interne (CSS) se superpose au fond pour rester visible.

++

Merci