Skip to main content
Participant
November 29, 2017
Answered

How do I make something stay put as I scroll down the page?

  • November 29, 2017
  • 3 replies
  • 456 views

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?

This topic has been closed for replies.
Correct answer Jon Fritz

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.

3 replies

Jon Fritz
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
November 29, 2017

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.

Ussnorway7605025
Legend
November 29, 2017

is the image a background or just an image inside a div?

Community Manager
November 29, 2017