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
Jump to PostHello 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:fixedto this element. Use top and left properties (or bottom and right) to place the element in the correct position.
Jump to Postusing
position: fixedwithtop: 0; left: 0should place the image at the top left of the screen regardless of the viewport size. The issue you are going to run into with usingposition: fixedis that is does not work well on mobile devices at all. If you …
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
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.