• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

New Here ,
Nov 28, 2017 Nov 28, 2017

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?

Views

336

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Nov 29, 2017 Nov 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,

...

Votes

Translate

Translate
Adobe Employee ,
Nov 28, 2017 Nov 28, 2017

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 28, 2017 Nov 28, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2017 Nov 29, 2017

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines