Highlighted

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

New Here ,
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?

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

TOPICS
Learn Dreamweaver

Views

224

Likes

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

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

New Here ,
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?

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

TOPICS
Learn Dreamweaver

Views

225

Likes

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
Nov 28, 2017 0
Adobe Employee ,
Nov 28, 2017

Copy link to clipboard

Copied

Likes

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
Reply
Loading...
Nov 28, 2017 1
Most Valuable Participant ,
Nov 28, 2017

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Nov 28, 2017 1
Adobe Community Professional ,
Nov 29, 2017

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.

Likes

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
Reply
Loading...
Nov 29, 2017 0