Copy link to clipboard
Copied
I have an image I would like to make stay at the top of the screen as I scroll down the web page, but I can't figure out how to do that. Can someone help me out?
Use css. Create a class using fixed positioning and the top/left/bottom/right properties to place it where you want it...
.your_image {
position:fixed;
top:0;
left:0;
}
Then add that class to the image in your html...
<img src="image.jpg" class="your_image" alt="some text">
The above will stick your image to the top left corner of the browser window and it will float over the top of everything else on the page when you scroll. Doing this takes the image entirely out of the normal flow of your document,
...Copy link to clipboard
Copied
Hi
See if below link helps:
https://davidwalsh.name/css-fixed-position-background-image ''
CSS background-position property
Thanks
Copy link to clipboard
Copied
is the image a background or just an image inside a div?
Copy link to clipboard
Copied
Use css. Create a class using fixed positioning and the top/left/bottom/right properties to place it where you want it...
.your_image {
position:fixed;
top:0;
left:0;
}
Then add that class to the image in your html...
<img src="image.jpg" class="your_image" alt="some text">
The above will stick your image to the top left corner of the browser window and it will float over the top of everything else on the page when you scroll. Doing this takes the image entirely out of the normal flow of your document, so it will likely overlap content if you don't specifically design the remainder of page around that fact.