image scrolling behind images

[devilish demon]

i have 3 images, 2 are feather's images and 1 is text image
i am trying to put these two feather images(which are in png format so to be transparent) in opposite corners as well as in front and 3rd text image should come from behind of the start of feather n scroll to the end of the other feather image(it should come and go behind the feathers, not above)
as feathers have little spaces so i want to show that text is going benath the feathers and ends where feather ends

i have attached a sample image

please help me in writing its guide

[ctaylo21]

See below.

[ctaylo21]

I'm not sure this is what you're looking for but you can simply use z-index to solve your problem:

CSS:
.feather
{
   position: absolute;
   z-index: 3;
}
.img_text{
   position: absolute;
   z-index: 1;
}
<img class="feather" src="feather1.png">
<img class="img_text" src="text.png">
<img class="feather" src="feather2.png">

That should allow the two feather images to appear over the top of the text image.

[devilish demon]

thanku for letting me know about the z-index usage, but its an incomplete answer.

please let me know which lne should i use to keep the other feather at the other end

and i have put the marquee tag along with the txt image but its nt working , so how should i scroll the txt image

<img src="images nu/Untitled-4.png" width="469" class="feather">
<center>
<marquee behavior="scroll" width="60%" scrollamount="4" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
<img class="img_text" src="images nu/Untitled-3.png">
</marquee>
</center>
<img src="images nu/Untitled-5.png" width="469" class="feather">

please let me know about my mistakes

[lps]

My opinion is that you shall position the initial position using CSS and use javascript to do the scrolling(refer jquery API:animate()).

[devilish demon]

i need a thorough help, please if anybody can then do

[ctaylo21]

You could use float to keep your images on opposite sides. Like:

<img src="images nu/Untitled-5.png" width="469" class="feather" style="float:left">
<center>
<marquee behavior="scroll" width="60%" scrollamount="4" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
<img class="img_text" src="images nu/Untitled-3.png">
</marquee>
</center>
<img src="images nu/Untitled-5.png" width="469" class="feather" style="float:right">

But I agree with lps, you should not be using marquee. It is an old markup that was never fully supported by browsers anyway. Scrolling text makes a page look old in my opinion, but you if you still really want it look into javascript solutions. Here is an example.

[devilish demon]

thanku so much for the help everybody :)