0

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

Attachments Untitled-1.png 112.55 KB
3
Contributors
7
Replies
8
Views
6 Years
Discussion Span
Last Post by devilish demon
0

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.

Edited by ctaylo21: n/a

0

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

Edited by devilish demon: n/a

0

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

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.