Baisser une image sans tout bouger

Bonjour
J'ai un problème avec mon code, j'ai essayé pas mal de chose mais rien ne marche jusque là.

Alors je m'explique. J'ai fait mon header tout s'est bien passé. Sous le header je veux mettre un slider. Mais je veux que le slider ait un "arrière plan". En gros mon slider fait 940px de large et je voudrais qu'il y ai un fond particulier pour s'adapter à tous les écrans.

J'ai un fichier "fond_slider" qui représente le fameux fond particulier. Et un fichier "slider" qui représente le slider ^^. Les 2 sont en .jpg.

Donc voici mon code HTML :

<div id="slider">
		<div class="image_slider">
        </div>

#slider{
    background: url("Images/fond_slider.jpg");
    height:412px;
}

#slider .image_slider{
    background: url("Images/slider.jpg");
    width:940px;
    height:322px;
    margin: 0 auto;
}

Donc là mon image_slider est centré horizontalement. Mais je voudrais le descendre un peu et je n'y arrive pas.
J'ai essayé un padding-top sur slider, il n'y a aucun changement, tout reste à la même place. J'ai essayé en mettant un background-position sur image_slider, l'image se décale bien MAIS entre le haut de mon #slider et le haut de mon image_slider il y a une bande (qui est le bas de mon image_slider, comme si le bas avait été dupliqué). Si je mets un padding-top sur image_slider, la même "duplication" est en bas. Et si je mets un margin-top sur image_slider, j'ai une bande blanche qui apparait entre #slider et #image_slider.

Je fais donc appel à vous pour savoir comment résoudre ce problème

Merci par avance
Modifié par cochi (26 Mar 2015 - 10:59)

Alors pourquoi, lorsque je mets un background position ça me donne ça ?

Donc en rouge c'est mon image_slider. Et la barre qu'on peut voir avec un bout de photo c'est le bas de mon image_slider