Member Avatar for SUNDARESAN.R

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

Edited by SUNDARESAN.R because: content edited
  • 4 Contributors
  • 5 Replies
  • 173 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by SUNDARESAN.R
Member Avatar for JorgeM

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.

Edited by JorgeM
Member Avatar for SUNDARESAN.R 
I have different resolutions,how can i fix the image in correct position.
Member Avatar for hag++

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.

Member Avatar for Kashinath C

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;
Member Avatar for SUNDARESAN.R

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.