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

Recommended Answers

See below.

Jump to Post

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 …

Jump to Post

All 7 Replies

See below.

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.

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

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

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

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.

thanku so much for the help everybody :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.