Hi,

I am new to daniweb. I have some clarifications, please give your suggestions.

I need a floating image in my website. When the user scrolls down the image should come down. If the user scrolls up, the image should go up.

Pls let me know how to do this task.

This is my first post, so if any clarifications. kindly, let me know.

Thanks & Regards,
Sundar

Hello and welcome to DaniWeb!

If you want the image to remain in one place regardless if you scroll down or up, apply the style position:fixed to this element. Use top and left properties (or bottom and right) to place the element in the correct position.

I have different resolutions,how can i fix the image in correct position.

using position: fixed with top: 0; left: 0 should place the image at the top left of the screen regardless of the viewport size. The issue you are going to run into with using position: fixed is that is does not work well on mobile devices at all. If you want this to work on mobile devices I would reccomend a javascript solution instead.

Just use below the css property.

If image is in backgournd the you need to use

background-postion:fixed;
margin:0px;
padding:0px;

else image is in element then you need to use

position:fixed;
margin:0px;
padding:0px;

Thanks to your reply.,JorgeM,hag++ & Kashinath C

Be a part of the DaniWeb community

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