2 image qui en forme une seul avec background-attachement

bonjour j'aimerais couper en 2 une image et lorsque l'on défile le texte la partie basse remonte jusqu'a la partie haute pour en former 1 seul.
je ne trouve rien appart background-attachement:fixed/scroll et position: fixed
mais le résultat me donne le contraire ma partie basse dessend. merci de me venir en aide
un petit bout de code

<div id="wrap">
<div id="entete"></div>
<div id="nav"></div>
<div id="contenu">
  <div id="figurine">
  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis volutpat risus non posuere. Donec auctor mi ut eros convallis scelerisque. Suspendisse a elit eget sem volutpat rutrum. Donec vulputate erat velit, non      congue orci finibus at. Vestibulum suscipit enim nec orci semper vulputate. Fusce eget felis rhoncus magna dictum mattis. Aliquam erat volutpat</p>

#wrap {
	position:absolute;
	width:100%;
	left: 50%;
	margin-left:-50%;
	height: 1000px;
	background:FFF;
	background-image:url(../images/haut.png);
	background-repeat:no-repeat;
	background-position: 0px 255px ;
	background-attachment:scroll;
} 

#contenu{
	position: relative;
	background-color:transparent;
	width:100%;
	height: 750px;
	background-image:url(../images/bas.png);
	background-repeat:no-repeat;
	background-position: 0px 675px ;
	background-attachment:scroll;
	overflow:scroll;
}
#figurine{
	position:relative;
	float:left;
	background-color:transparent;

}

voire le lien en dessous c'est l'image du problèeme
http://fraccreationweb.com/modeles/modeleAlsacreation.jpg
Modifié par fredcrosby (07 Nov 2015 - 03:34)

salut j'aimere bien savoir comment creer un champ de recherche avec php css et javascript pour l'animation
ce que je pu travaillez ce sa
<form action=''#''>
<input type=''text'' placeholder=''Recherche'' name=''q'' id=''search''/>
</form>
et pour le code css je fait
#head form(
position:absolute;
top:315px;
right:39px;
border:1px solid #363636;
border-radius:50px;
)
#head form input (
border-radius: 50px;
border: none;
height:18px;
outline:none;
padding:0 5px 0px 23px;
box-shadow:inset 0px 0px 5px rgba(0,0,0,0,4);
color:black;
text-shadow:0 1 0 #2c2d2f;
width:100px;
transition:0.5s;
)
#head form input:focus(
width:200px;
color:#000;
text-shadow:0px 1px 0px #fff;
)
pardon c mon exam aidé moi en javascript